Apakah itu SSR, SSG dan ISR dalam Next.js?

Question

Accepted Answer

Ini adalah tiga strategi utama untuk menentukan *bila* HTML sesuatu halaman dijana. Memilih yang betul bagi setiap halaman mengimbangi kesegaran data, prestasi, dan kos pelayan. ## SSG — Static Site Generation (pada masa build) ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` Halaman dipra-render kepada HTML statik semasa build dan dicache pada CDN. Penyampaian **sepantas mungkin**, tetapi kandungannya beku sehingga build seterusnya. Paling sesuai untuk kandungan yang jarang berubah: halaman pemasaran, dokumentasi, catatan blog. ## SSR — Server-Side Rendering (pada setiap permintaan) ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` Pelayan me-render halaman bagi setiap permintaan, jadi data sentiasa terkini — dengan kos respons yang lebih lambat dan beban pelayan pada setiap lawatan. Paling sesuai untuk data yang diperibadikan atau sentiasa segar: dashboard, halaman akaun, hasil carian. ## ISR — Incremental Static Regeneration (hibrid) ```tsx // Static, but automatically rebuilt in the background every N seconds export const revalidate = 60; // regenerate at most once per 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISR menyampaikan HTML statik (pantas, dicache CDN) tetapi **mengesahkan semula (revalidate)** ia di latar belakang mengikut jadual — jadi anda memperoleh prestasi statik dengan data yang segar secara berkala, tanpa membina semula keseluruhan tapak. Paling sesuai untuk kandungan yang berubah sekali-sekala: senarai produk, berita, papan pendahulu. ## Perbandingan ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` ## Mengapa ia penting Dalam App Router anda memilih ini bagi setiap fetch melalui opsyen cache (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) dan bukannya menggunakan fungsi khas. Memahami trade-off ini — statik adalah paling pantas tetapi basi, SSR segar tetapi mahal, ISR mengimbangi kedua-duanya — membolehkan anda mengoptimumkan setiap halaman untuk gabungan prestasi dan kesegaran data yang betul.