Belajar Nuxt - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Sekarang kita masuk ke bagian teknis yang paling penting: bagaimana Nuxt bekerja di balik layar. Kalian tidak wajib menghafal semua detail internal, tapi memahami arsitektur utama akan menyelamatkan kalian dari banyak kebingungan — misalnya kenapa sebuah composable berjalan di server, atau kenapa sebuah halaman dirender dua kali.

Episode 2 membahas empat pilar arsitektur Nuxt: rendering modes, server engine Nitro, auto-import, dan struktur project. Kita juga akan melihat bagaimana Nuxt menentukan batas antara kode yang berjalan di server dan kode yang berjalan di browser. Ini adalah lensa yang akan kalian pakai untuk membaca semua episode selanjutnya.

#Rendering Modes: SSR, SSG, ISR, dan SPA

Nuxt bisa merender aplikasi yang sama dengan strategi berbeda, bahkan per halaman. Keempat mode utamanya:

• SSR: server merender HTML penuh per request. Bagus untuk data dinamis dan personal.
• SSG: halaman dirender sekali saat build menjadi file statis. Paling cepat dan murah.
• ISR: kombinasi SSG dengan revalidasi berkala. Konten statis yang sesekali diperbarui.
• SPA: semua dirender di browser, Nuxt hanya menjadi host. Berguna untuk area login yang sangat dinamis.

Pengaturan mode memakai routeRules di nuxt.config.ts:

Mengatur mode per halaman

export default defineNuxtConfig({
  routeRules: {
    "/": { prerender: true },
    "/produk/**": { swr: 300 },
    "/dashboard/**": { ssr: false }
  }
})

prerender: true menghasilkan HTML statis saat build, swr membuat halaman dirender ulang setelah jeda detik tertentu, dan ssr: false menjadikan halaman SPA murni.

#Nitro Server Engine

#Abstraksi Server yang Satu untuk Semua

Nitro adalah server engine Nuxt. Dia merender halaman di server, menyajikan API dari folder server, dan menghasilkan deployment artifact untuk banyak target sekaligus. Keunggulannya: kalian menulis kode server sekali, lalu bisa men-deploy ke Node, Vercel, Netlify, Cloudflare, bahkan serverless functions, tanpa mengubah kode.

Server route di Nitro

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return { status: "ok", data: body }
})

Nitro menyediakan utilitas seperti readBody(event) untuk membaca payload request, getQuery(event) untuk query string, dan setCookie untuk mengelola cookie.

#Storage dan Cache Bawaan

Nitro juga punya storage terdistribusi yang bisa diakses dari kode server, berguna untuk cache dan shared state:

Menyimpan data di Nitro storage

const nilai = await useStorage("data").getItem("kunci")
await useStorage("data").setItem("kunci", "nilai")

useStorage("data").getItem("kunci") membaca dari storage Nitro yang abstraksinya sama untuk filesystem, Redis, atau Cloudflare KV.

#Auto-Import, Modules, dan Composables

#Auto-Import Tanpa Import Statement

Nuxt secara otomatis mengimpor komponen dari components, composables dari composables, dan utility dari utils. Kalian langsung memakainya di template tanpa baris import:

Komponen ter-auto-import

<template>
  <div>
    <SiteHeader />
    <KartuProduk v-for="item in daftar" :key="item.id" :item="item" />
  </div>
</template>
 
<script setup lang="ts">
const daftar = await useFetch("/api/produk")
</script>

<SiteHeader /> dan <KartuProduk /> dipakai tanpa import karena Nuxt memindai folder components secara otomatis. useFetch juga auto-import dari Nuxt.

#Modules: Paket Fitur Nuxt

Module adalah cara memperluas Nuxt secara terstruktur. Contoh terkenal: @nuxt/image, @nuxt/content, @pinia/nuxt, dan @nuxtjs/i18n. Modules didaftarkan di nuxt.config.ts dan biasanya mengatur dirinya sendiri saat project dijalankan.

#Komponen Utama Project dan Alur Kerjanya

#Struktur Direktori Standar

Project Nuxt 4 modern punya struktur berikut:

app/
  app.vue
  pages/
  components/
  composables/
  layouts/
  middleware/
  plugins/
server/
  api/
nuxt.config.ts
package.json

app/ menampung semua kode client-facing, server/ menampung API dan middleware server. Folder public/ untuk aset statis seperti gambar dan favicon.

#File-Based Routing dan Nested Routes

Setiap file .vue di pages menjadi satu route. Nested routes dibuat dengan folder bernama sama dengan halaman induk. app/pages/produk/index.vue menjadi /produk, dan app/pages/produk/[id].vue menjadi /produk/1.

#Nuxt Config dan Runtime Config

nuxt.config.ts adalah satu-satunya sumber kebenaran untuk konfigurasi build, modules, dan runtime config. Nilai runtime config bisa diakses dari kode server maupun client sesuai tingkat visibilitasnya — detailnya di episode 8.

#Lifecycle Nuxt dan Batas Server/Client

#Siklus Permintaan dan Hydration

Saat pengguna membuka halaman, alurnya kira-kira begini: Nitro menerima request, menjalankan server middleware, merender komponen di server, mengirim HTML plus payload, lalu Vue mengambil alih di browser dan menghidupkan interaktivitas melalui proses yang disebut hydration.

#Kode Server vs Kode Client

Ini konsep yang paling sering salah dipahami. Kode dalam <script setup> sebuah halaman bisa berjalan dua kali: sekali di server saat render, sekali di client saat hydration. Composables tertentu hanya berjalan di salah satu sisi:

Membedakan sisi eksekusi

if (import.meta.server) {
  console.log("berjalan di server")
}
if (import.meta.client) {
  console.log("berjalan di browser")
}

Gunakan import.meta.server dan import.meta.client untuk menulis kode spesifik sisi. Episode 6 akan membahas bagaimana pola ini berhubungan dengan pengambilan data.

#Penutup

Episode 2 membuka selubung arsitektur Nuxt: empat rendering modes yang bisa diatur per halaman lewat route rules, Nitro sebagai server engine yang universal, auto-import yang menghilangkan boilerplate import, struktur direktori yang terstandar, serta batas server-client yang jelas.

Inti yang harus dibawa pulang:

• SSR, SSG, ISR, dan SPA diatur per halaman memakai routeRules.
• Nitro adalah server engine yang memungkinkan satu kode server untuk semua platform.
• Auto-import membuat komponen dan composables langsung tersedia tanpa import statement.
• Struktur app/ dan server/ memisahkan kode client-facing dari kode server.
• File-based routing menghasilkan route dari struktur folder pages.
• Kode di <script setup> bisa berjalan di server dan client; kenali batasannya dengan import.meta.server dan import.meta.client.

Di episode 3 selanjutnya kita akan membuat project Nuxt pertama secara nyata — memakai npx nuxi init, menjelajahi struktur folder, menjalankan dev server dengan hot reload, dan mengonfigurasi TypeScript, ESLint, serta Prettier. Saatnya tangan kalian mulai mengetik kode.