Belajar Nuxt - Sejarah, Latar Belakang & Mengapa Membutuhkan Nuxt

#Pendahuluan

Setelah environment kalian siap, mari memahami mengapa Nuxt lahir dan masalah apa yang dia selesaikan. Nuxt sering disebut meta framework — sebuah framework yang dibangun di atas framework lain. Dia tidak mengganti Vue, dia melengkapi Vue dengan layer full-stack yang utuh.

Untuk memahami nilai Nuxt, kalian perlu tahu dulu kesulitan membangun aplikasi Vue secara manual: mengatur router, mengurus rendering di server, menyiapkan server API, menangani meta tags untuk SEO, sampai men-deploy ke berbagai platform. Semua itu adalah pekerjaan berulang yang dilakukan setiap developer secara berbeda-beda.

Episode 1 ini membedah latar belakang tersebut: bagaimana Nuxt berevolusi dari Nuxt 2 ke Nuxt 3 lalu Nuxt 4, apa posisinya di ekosistem Vue dan JAMstack, serta bagaimana dia dibandingkan dengan membangun Vue SPA manual atau memakai Next.js. Kalian akan keluar dari episode ini dengan alasan kuat mengapa Nuxt layak dipelajari.

#Evolusi dan Sejarah Nuxt

#Dari Vue SPA Manual Menuju Meta Framework

Vue lahir sebagai library reaktif untuk user interface. Saat sebuah aplikasi tumbuh, developer harus memilih dan merangkai sendiri banyak library: vue-router untuk routing, vuex atau pinia untuk state, axios untuk data, dan solusi SSR yang rumit bernama vue-server-renderer. Rangkaian keputusan ini berbeda di setiap project dan memakan banyak waktu.

Nuxt muncul untuk menstandarkan semua itu. Dia menyediakan konvensi direktori yang sudah disepakati, file-based routing, auto-import, dan satu entry point yang konsisten. Developer cukup fokus menulis fitur, bukan merangkai infrastruktur.

#Dari Nuxt 2 ke Nuxt 3 dan Nuxt 4

Perjalanan Nuxt melalui beberapa tonggak besar:

• Nuxt 2: berbasis Vue 2, webpack, dan vue-server-renderer. Populer karena menyatukan SSR dan SSG.
• Nuxt 3: ditulis ulang total. Berbasis Vue 3, Vite, dan Nitro sebagai server engine. Menghapus semua dependency runtime ke framework.
• Nuxt 4: memperkenalkan struktur direktori app/ yang lebih bersih, server actions yang stabil, dan peningkatan modularitas.

npx nuxi info

Perintah npx nuxi info menampilkan versi Nuxt, Nitro, dan Node yang dipakai project kalian. Informasi ini sangat berguna saat debugging isu versi.

#Posisi Nuxt di Ekosistem Vue dan JAMstack

Nuxt adalah framework resmi dari tim Vue ecosystem, bersama Vite dan Vitest. Dalam istilah JAMstack — JavaScript, API, dan Markup — Nuxt bisa menghasilkan markup statis yang disajikan cepat di CDN, sekaligus memakai JavaScript dan API server saat dibutuhkan. Dia menjembatani dunia SPA yang sepenuhnya client-side dan dunia server-rendered yang lebih tradisional.

#Masalah yang Diselesaikan Nuxt

#Setup Full-Stack dengan Routing dan Data Fetching

Secara tradisional, membangun aplikasi full-stack Vue berarti dua codebase: frontend Vue dan backend terpisah. Nuxt menyatukan keduanya. Routing otomatis dari folder pages, data diambil dengan composable bawaan, dan API ditulis di folder server dengan Nitro.

API di folder server

export default defineEventHandler((event) => {
  return { nama: "Arman", peran: "Cloud & Software Engineer" }
})

File di server/api otomatis menjadi endpoint HTTP. defineEventHandler((event) => {...}) menerima request dan mengembalikan response JSON tanpa perlu setup Express atau Fastify.

#Simplifikasi SSR dan SSG

Sebelum Nuxt, mengaktifkan SSR memaksa kalian mengatur server sendiri, menangani hydration, dan membagi kode server-client secara manual. Nuxt mengabstraksi semua itu lewat mode rendering per halaman:

routeRules di nuxt.config

export default defineNuxtConfig({
  routeRules: {
    "/blog/**": { swr: 3600 },
    "/": { prerender: true }
  }
})

routeRules memungkinkan setiap pola halaman punya strategi rendering berbeda. Prerender untuk halaman statis dan swr untuk konten yang dirender ulang di server dengan cache. Konsep ini akan diperdalam di episode 14.

#Perbandingan dengan Pendekatan Lain

#Nuxt vs Vue SPA Manual

Vue SPA murni hanya dirender di browser, sehingga SEO buruk, waktu muat pertama lama, dan tidak ada server-side data. Kalian juga harus merangkai router, state, dan tooling sendiri. Nuxt memberikan semua itu secara terintegrasi plus kemampuan SSR. Pilih Vue SPA murni hanya untuk dashboard internal yang tidak butuh SEO.

#Nuxt vs Next.js

Next.js dan Nuxt sejajar dalam banyak hal: routing berbasis file, SSR, SSG, dan serverless deployment. Perbedaan inti ada di ekosistem: Next.js memakai React, Nuxt memakai Vue. Bagi kalian yang sudah nyaman dengan Vue, Nuxt adalah pilihan paling natural. Selain itu Nuxt menawarkan Nitro yang membuat kode server kalian bisa berjalan di hampir semua platform tanpa menulis adapter khusus.

#Kapan Sebaiknya Tidak Memakai Nuxt

Jujur soal batasan: untuk landing page statis yang sangat sederhana, Nuxt mungkin terlalu besar — Vue atau bahkan HTML statis cukup. Untuk API murni tanpa UI, lebih baik backend khusus. Nuxt bersinar justru saat kalian butuh keduanya dalam satu codebase: UI yang dirender di server dan API yang bisa dipanggil dari client.

Pertimbangan lain adalah biaya perawatan tooling. Pada Vue SPA manual, meng-upgrade satu dependency besar bisa merusak banyak bagian lain, dan kalian harus memperbaiki semuanya sendiri. Nuxt mengelola kompatibilitas banyak dependency secara terpusat, sehingga kalian lebih fokus ke fitur.

Beberapa contoh keputusan yang bisa membantu:

• Landing page statis sederhana: HTML statis atau SSG sudah cukup.
• Dashboard internal dengan traffic kecil: Vue SPA murni sudah memadai.
• Aplikasi publik dengan SEO dan server logic: Nuxt adalah pilihan paling tepat.
• Full API tanpa UI: gunakan backend khusus, bukan Nuxt.

#Penutup

Episode 1 meletakkan landasan mental kalian: Nuxt lahir karena merakit full-stack Vue secara manual itu sulit dan tidak konsisten. Dia menstandarkan routing, data fetching, SSR, SSG, dan server engine dalam satu framework yang terus berevolusi dari Nuxt 2 ke Nuxt 3 dan kini Nuxt 4.

Inti yang harus dibawa pulang:

• Nuxt adalah meta framework di atas Vue yang melengkapi, bukan mengganti.
• Evolusi Nuxt 2, Nuxt 3, dan Nuxt 4 menunjukkan pergeseran ke Vite, Nitro, dan struktur app/.
• Nuxt menyelesaikan masalah setup full-stack: routing, data fetching, dan API dalam satu codebase.
• Mode rendering SSR, SSG, dan ISR dikontrol per halaman lewat route rules.
• Nuxt adalah padanan Vue dari Next.js; pilih sesuai ekosistem yang kalian kuasai.
• API server di Nuxt ditulis dengan Nitro tanpa membutuhkan backend terpisah.

Di episode 2 selanjutnya kita akan membahas konsep dasar dan arsitektur utama Nuxt — bagaimana rendering modes bekerja di balik layar, peran Nitro sebagai server engine, mekanisme auto-import, komponen utama project, serta batas antara kode server dan kode client. Ini akan menjadi fondasi teknis untuk semua episode berikutnya.