Belajar Vue - Server-side Rendering & Nuxt

#Pendahuluan

SPA yang dibangun di episode sebelumnya merender halaman di browser. Konsekuensinya: browser harus mengunduh bundle dulu, sehingga halaman pertama tidak langsung berisi konten. SSR menjawabnya dengan merender HTML di server.

Episode 21 membahas server-side rendering dengan Nuxt.js: dasar SSR, hybrid rendering dan static generation, model data fetching khas Nuxt dengan middleware, serta panduan kapan memilih SSR dibanding SPA.

#Dasar SSR dengan Nuxt

#Apa yang Terjadi di SSR

Pada SSR, server menjalankan Vue, merender halaman menjadi HTML, lalu mengirimkan HTML jadi ke browser. Konten langsung tampil, JavaScript di-hydrate untuk interaktivitas. Hasilnya: halaman pertama lebih cepat dan SEO lebih baik.

#Memulai Proyek Nuxt

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install

npx nuxi@latest init membuat proyek Nuxt dengan struktur pages/, components/, dan app.vue. Jalankan dengan:

npm run dev

npm run dev menyalakan server dengan SSR dan hot reload. Nuxt memakai struktur folder untuk routing otomatis, berbeda dari vue-router manual.

#Hybrid Rendering dan Static Generation

#Route Rules

Nuxt bisa mencampur rendering per rute melalui routeRules:

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

prerender: true membuat halaman beranda sebagai static HTML saat build, sedangkan swr dan isr menyajikan versi cache yang diperbarui di belakang layar. Satu aplikasi bisa memakai beberapa strategi sekaligus.

#Static Generation

nuxt generate menghasilkan seluruh situs sebagai file statis:

npm run generate

npm run generate me-render semua halaman saat build dan menulis hasilnya ke folder dist. Hasilnya bisa dihosting di CDN mana pun, termasuk platform di episode 20.

#Data Fetching di Nuxt

#useFetch di Halaman

Nuxt menyediakan useFetch yang menggabungkan fetching dan state:

<script setup lang="ts">
const { data: produk, pending } = await useFetch("/api/produk");
</script>
 
<template>
  <div v-if="pending">Memuat...</div>
  <ul>
    <li v-for="item in produk" :key="item.id">{{ item.nama }}</li>
  </ul>
</template>

useFetch("/api/produk") dijalankan di server saat SSR, mengirim data bersama HTML. Browser tidak perlu request tambahan untuk halaman pertama.

#Middleware untuk Proteksi

Middleware Nuxt berjalan sebelum halaman dirender:

export default defineNuxtRouteMiddleware((to) => {
  if (!isLogin()) {
    return navigateTo("/login");
  }
});

defineNuxtRouteMiddleware((to) => ...) memeriksa autentikasi sebelum render. File bernama auth.ts di folder middleware dipakai dengan menambahkan properti middleware pada halaman.

#SSR vs SPA: Kapan Memilih

• Pilih SSR jika konten harus terindeks SEO atau dibagikan di media sosial.
• Pilih SPA untuk aplikasi internal dan dashboard yang butuh interaksi intensif.
• Pilih static generation untuk blog dan situs yang isinya jarang berubah.
• Pilih hybrid jika kebutuhan campuran: halaman publik statis, halaman user dinamis.

#Penutup

Episode 21 membuka dunia SSR dan Nuxt: alasan di balik server-side rendering, hybrid rendering dengan routeRules dan static generation, data fetching dengan useFetch serta middleware, dan panduan memilih antara SSR, SPA, dan static site.

Inti yang harus dibawa pulang:

• SSR mengirim HTML jadi, mempercepat halaman pertama.
• Nuxt memakai struktur folder untuk routing otomatis.
• routeRules mencampur prerender, SWR, dan ISR.
• nuxt generate menghasilkan situs statis.
• useFetch berjalan di server untuk data awal.
• Middleware melindungi halaman sebelum render.

Di episode 22 selanjutnya kita membahas observability dan monitoring — memantau performa frontend, melacak error dengan Sentry, real user monitoring dan analytics, serta dukungan produksi dan penanganan insiden.