0Pricing
Vue Academy · Pelajaran

Mode SSR vs SSG vs SPA

ssr:true/false, prerender Nitro, perintah generate, serta rendering hibrida per rute.

Mode SSR vs SSG vs SPA adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Ikhtisar Mode Perenderan

Nuxt dapat merender aplikasi Anda dengan tiga cara: SSR (server merender setiap permintaan), SSG (halaman dibuat sebelumnya saat proses build), dan SPA (semuanya dirender di peramban). Anda bahkan dapat mencampurnya untuk setiap rute.

SSR: Default

Dengan ssr: true (default), server merender HTML untuk setiap permintaan dan klien melakukan hidrasi. Hasilnya adalah tampilan pertama yang cepat dan SEO yang baik karena perayap melihat markup lengkap.

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

Saat SSR Unggul

SSR cocok untuk konten yang sering berubah atau dipersonalisasi—dasbor, umpan, serta perdagangan elektronik dengan harga langsung—saat Anda menginginkan HTML terbaru pada setiap permintaan.

Mode SPA

Menetapkan ssr: false mengubah Nuxt menjadi aplikasi satu halaman: server mengirim kerangka kosong dan peramban merender semuanya. Penghostingannya lebih sederhana, tetapi SEO lebih lemah dan tampilan pertama lebih lambat.

export default defineNuxtConfig({
  ssr: false
})

Saat SPA Cocok

Mode SPA cocok untuk alat internal dan aplikasi di balik login, saat SEO tidak penting dan Anda ingin menerapkannya sebagai berkas statis ke CDN mana pun.

SSG: Pembuatan Situs Statis

Menjalankan nuxt generate membuat sebelumnya setiap halaman menjadi HTML statis saat proses build. Hasilnya adalah folder berisi berkas yang dapat Anda hosting di mana saja tanpa server Node.

npx nuxt generate
# outputs static HTML to .output/public

Saat SSG Cocok

SSG sangat cocok untuk konten yang jarang berubah—blog, dokumentasi, dan situs pemasaran. Halaman ditampilkan dengan sangat cepat dan murah untuk disajikan dari CDN.

Perenderan Per Rute dengan routeRules

Konfigurasi routeRules menetapkan mode perenderan untuk setiap pola jalur. Ini disebut perenderan hibrida: bagian yang berbeda dari satu aplikasi menggunakan strategi yang berbeda.

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

Opsi routeRules yang Umum

prerender: true membuat halaman saat proses build; ssr: false menjadikannya SPA; swr: n menyimpan hasil SSR dalam cache selama n detik (menyajikan data lama sambil memvalidasi ulang); redirect mengarahkan pengguna ke tempat lain.

Regenerasi Statis Inkremental

Opsi isr membuat halaman terlebih dahulu pada permintaan pertama dan menyimpan hasilnya dalam cache, lalu membuatnya ulang secara berkala. Strategi ini menggabungkan kecepatan SSG dengan kesegaran SSR untuk halaman populer.

routeRules: {
  '/products/**': { isr: 600 }
}

Memilih Strategi

Mulailah dengan SSR sebagai pilihan default terbaik untuk SEO dan interaktivitas. Gunakan SSG untuk konten statis, SPA untuk aplikasi privat, dan routeRules untuk menyempurnakan rute individual saat kebutuhan kinerja mulai terlihat.

Uji Singkat

Uji pengetahuan Anda tentang mode perenderan.

Ringkasan

Anda telah mempelajari mode perenderan:

  • SSR (default) merender pada setiap permintaan: SEO baik dan tampilan pertama cepat.
  • ssr:false memberikan SPA untuk aplikasi privat.
  • nuxt generate menghasilkan situs SSG statis.
  • routeRules mengaktifkan perenderan hibrida: prerender, swr, isr, dan ssr:false untuk setiap rute.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mode SSR vs SSG vs SPA” gratis?

Ya — teks lengkap “Mode SSR vs SSG vs SPA” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mode SSR vs SSG vs SPA”?

ssr:true/false, prerender Nitro, perintah generate, serta rendering hibrida per rute. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Mode SSR vs SSG vs SPA” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Struktur Proyek Nuxt 3 dan Perutean Berbasis File
  2. Pengambilan Data: useFetch dan useAsyncData
  3. Rute Server dan Endpoint API Nuxt
  4. Mode SSR vs SSG vs SPA
← Kembali ke Vue Academy