Ini adalah tiga strategi utama untuk kapan HTML halaman dihasilkan. Memilih yang tepat per halaman menyeimbangkan kesegaran, kinerja, dan biaya server.
SSG — Static Site Generation (saat build)
tsx
() {
posts = (, { : }).( r.());
;
}
Ini adalah tiga strategi utama untuk kapan HTML halaman dihasilkan. Memilih yang tepat per halaman menyeimbangkan kesegaran, kinerja, dan biaya server.
() {
posts = (, { : }).( r.());
;
}
Halaman di-pre-render ke HTML statis pada saat build dan disimpan dalam cache di CDN. Pengiriman tercepat yang mungkin, tetapi konten tetap beku sampai build berikutnya. Terbaik untuk konten yang jarang berubah: halaman pemasaran, dokumentasi, posting blog.
// HTML generated FRESH on every request
export default async function Page() {
const data = await fetch("...", { cache: "no-store" }).then(r => r.json());
return <Dashboard data={data} />;
}
Server merender halaman per permintaan, jadi data selalu terkini — dengan biaya respons yang lebih lambat dan beban server di setiap kunjungan. Terbaik untuk data yang dipersonalisasi atau selalu segar: dasbor, halaman akun, hasil pencarian.
// 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 <Products items={products} />;
}
ISR menampilkan HTML statis (cepat, disimpan dalam cache CDN) tetapi memvalidasi ulang secara berkala di latar belakang — sehingga Anda mendapatkan kinerja statis dengan data yang segar secara berkala, tanpa membangun ulang seluruh situs. Terbaik untuk konten yang berubah sesekali: daftar produk, berita, papan peringkat.
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
Di App Router Anda memilih ini per-fetch melalui opsi cache (force-cache = SSG, no-store = SSR, revalidate = ISR) daripada fungsi khusus.
Memahami trade-off — statis paling cepat tetapi usang, SSR segar tetapi mahal, ISR menyeimbangkan keduanya — memungkinkan Anda untuk mengoptimalkan setiap halaman untuk kombinasi yang tepat antara kinerja dan kesegaran data.