Memahami Strategi Rendering di Nuxt 3

Nuxt 3 mendukung berbagai strategi rendering sehingga tim produk bisa memilih model yang sesuai untuk tiap halaman. Server-side rendering (SSR) menjalankan komponen di server pada setiap permintaan, memastikan HTML lengkap untuk crawler. Static site generation (SSG) menghasilkan file HTML sekali, ideal untuk halaman yang jarang berubah. Nuxt juga memungkinkan pola mirip Incremental Static Regeneration (ISR) lewat konfigurasi cache-Nitro, dan tentu saja client-side fetching tetap relevan untuk halaman pribadi dengan data sensitif.

Penting untuk memahami dampak tiap strategi pada SEO, performa, cache, biaya server, dan kompleksitas deployment. Pilihan yang tepat menghindarkan SEO downgrade, over-fetching, atau biaya server tinggi yang tidak perlu.

SSR: HTML Dinamis untuk SEO dan Interaktivitas

SSR cocok untuk halaman yang harus selalu up-to-date dan dilihat oleh crawler, misalnya daftar produk, detail produk, dan halaman marketing berbasis katalog dinamis. SSR memberi konten lengkap saat pengunjung mendarat, mendukung SEO dan analitik. Kekurangannya adalah beban CPU server lebih tinggi; caching perlu untuk meredam latensi. Gunakan Nitro cache dengan cache: { swr: true, maxAge: 10 } untuk menghindari rendering redundan.

SSG: Performa Maksimal untuk Konten Stabil

SSG menjalankan proses build untuk menghasilkan HTML. Saat konten jarang berubah—seperti landing page evergreen atau halaman dokumentasi—SSG memberikan latency rendah dan biaya hosting minimal. Perhatikan juga waktu build karena setiap perubahan memicu ulang proses render. Integrasi webhook dengan CMS (misal Sanity, Contentful) bisa otomatis memicu ulang build sehingga konten tetap segar.

Pola Mirip ISR: yang Terbaik di Tengah

Nuxt tidak menyediakan ISR built-in, namun Anda bisa meniru pola ini dengan menetapkan cache Nitro atau route rules yang mengizinkan invalidasi otomatis. Pendekatan ini memanfaatkan prerender di build sekaligus cache revalidasi di server, cocok untuk blog atau katalog yang sering berubah tapi tidak perlu render tiap permintaan.

Client-side Fetching untuk Halaman Terproteksi

Halaman seperti dashboard internal memiliki data pengguna sensitif dan tidak boleh ditampilkan kepada crawler. Rendering murni di client dengan useAsyncData memungkinkan Nuxt mengirimkan skeleton awal, lalu panggilan API terjadi setelah autentikasi. Pendekatan ini menurunkan risiko leak data dan menyeimbangkan beban server.

Studi Kasus: Empat Tipe Halaman

1. Halaman Produk (Kategori & Detail)

Produk biasanya memiliki konten yang berubah (stok, harga) dan perlu SEO karena organic search. Gunakan SSR dengan route rule yang mengaktifkan cache SWR. Contoh: server render pada setiap permintaan, tetapi masih cache untuk 10 detik untuk melindungi backend.

  • SEO: optimal dengan HTML lengkap.
  • Performa: latensi dependensi pada cache, tapi responsif berkat prefetch.
  • Biaya server: lebih tinggi tanpa cache, jadi gunakan cache: { swr: true, maxAge: 10 }.

2. Blog dengan Update Terjadwal

Jika tiap artikel tidak bergantung pada data realtime, SSG dengan pola ISR-like cocok. Prerender setiap artikel saat build, lalu atur route rule untuk revalidasi otomatis.

  • SEO: ideal, karena konten lengkap tersedia saat crawling.
  • Performa: sangat cepat karena file statis.
  • Cache: revalidate via cache Nitro ketika webhook CMS memanggil endpoint rebuild atau invalidasi.

3. Dashboard Internal

Dashboard menyajikan data sensitif (misal metrik penjualan) dan biasanya hanya diakses pengguna terotentikasi. Gunakan client-side fetching setelah autentikasi, sehingga HTML tidak menyertakan data pengguna. Render SSR hanya untuk kerangka (skeleton) jika perlu, tetapi data utama diambil di client.

  • Keamanan: minimal exposure data pada HTML.
  • Performance: rendering awal ringan, tapi fetch perlu optimasi (misal caching HTTP, pagination).
  • Cache: hindari cache browser untuk data pribadi.

4. Landing Page Marketing

Landing page harus cepat terbuka dan hampir tidak berubah. SSG adalah pilihan terbaik. Integrasikan CDN, dan jika ingin menambahkan testimonial dinamis, Anda bisa memanggil API di client setelah render statis selesai.

  • SEO: konten statis dan lengkap mudah dicrawl.
  • Performa: sangat baik karena distribusi via CDN.
  • Biaya server: minimal karena hanya melayani file statis.

Mengatur Route Rules dan useAsyncData

Nuxt 3 menyediakan routeRules di nuxt.config untuk menentukan strategi render tiap rute. Contoh konfigurasi berikut menggabungkan SSR untuk produk, ISR-like untuk blog, dan SSG untuk landing page:

export default defineNuxtConfig({
  routeRules: {
    '/produk/**': {
      ssr: true,
      cache: {
        swr: true,
        maxAge: 10
      }
    },
    '/blog/**': {
      ssr: true,
      cache: {
        swr: true,
        maxAge: 60
      },
      static: false
    },
    '/landing': {
      static: true,
      headers: {
        'Cache-Control': 'max-age=31536000, immutable'
      }
    },
    '/dashboard/**': {
      ssr: false,
      static: false
    }
  }
})

Dengan aturan ini, produk dirender di server tiap permintaan tapi cache singkat mencegah beban tinggi. Blog mendapat revalidation dalam 60 detik, mirip ISR (SWR + cache). Landing page menjadi static dengan header cache panjang, sedangkan dashboard murni dijalankan di client.

Dalam halaman yang masih menggunakan SSR atau ISR, useAsyncData membantu menyinkronkan data.

const { data: product } = await useAsyncData('product-detail', () =>
  $fetch(`/api/produk/${params.sku}`),
  {
    server: true,
    lazy: false,
    default: () => ({ name: 'Loading...' })
  }
)

Pemanggilan ini memastikan Nuxt mengumpulkan data sebelum merender HTML, penting untuk SEO. Kombinasikan dengan error handling untuk menampilkan fallback, dan gunakan $fetch dengan authentication headers saat perlu.

Kapan Memilih Mode Render?

Berikut panduan praktis:

  • Pilih SSR jika halaman butuh data real-time, SEO penting, dan traffic tidak bisa diprediksi (misal detail produk baru).
  • Pilih SSG untuk konten stabil, marketing page, dokumentasi, dengan update terbatas.
  • Pola ISR-like cocok saat konten perlu refresh berkala tapi tidak tiap permintaan—membutuhkan cache Nitro dengan revalidate dan webhook rebuild.
  • Client-side fetching ideal untuk dashboard, profil pengguna, atau aplikasi internal dengan data sensitif.

Untuk kombinasi, manfaatkan route rules agar satu aplikasi Nuxt bisa meng-host berbagai strategi render. Jangan lupa menyiapkan pipeline CI/CD yang sesuai; contohnya rerender halaman statis saat CMS update, dan pastikan invalidasi CDN dilakukan otomatis.

Debugging tip: lampirkan logging di server middleware untuk memeriksa apakah halaman di-render di server atau client. Gunakan nuxt dev dengan inspector dan npx nuxi preview untuk simulasi SSR vs SSG.

Kesimpulan

Nuxt 3 memberi fleksibilitas tinggi dalam memilih strategi render per halaman. Dengan menyesuaikan SSR, SSG, ISR-like cache, dan client-side fetching berdasarkan kebutuhan halaman—produk, blog, dashboard, landing page—Anda dapat mencapai keseimbangan optimal antara SEO, performa, biaya server, dan kompleksitas deployment. Rencanakan route rules yang jelas dan gunakan useAsyncData untuk menjaga konsistensi data. Pendekatan hybrid ini membuat aplikasi Nuxt scalable tanpa mengorbankan pengalaman pengguna.