Pembuatan Ulang Situs Statis Bertahap (ISR)
Buat ulang halaman statis sesuai jadwal atau sesuai permintaan tanpa menerapkan ulang seluruh aplikasi.
Pembuatan Ulang Situs Statis Bertahap (ISR) adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.
Apa Itu ISR?
Regenerasi Statis Inkremental memungkinkan Next.js menyajikan halaman statis yang telah dibangun sebelumnya sambil membuat ulang halaman tersebut di latar belakang setelah selang waktu tertentu—menggabungkan kecepatan HTML statis dengan kemutakhiran perenderan server.
Cara Kerja ISR
Pada permintaan pertama, Next.js menyajikan HTML statis yang di-cache. Setelah periode validasi ulang berakhir, permintaan berikutnya memicu pembuatan ulang di latar belakang. Permintaan selanjutnya menyajikan halaman baru setelah pembuatan ulang selesai.
Mengaktifkan ISR dengan revalidate
Ekspor konstanta revalidate atau tetapkan next: { revalidate: N } pada pemanggilan fetch di dalam halaman Komponen Server.
// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds
export default async function BlogPage() {
const posts = await getPosts();
return <PostList posts={posts} />;
}ISR dengan Rute Dinamis
Gabungkan generateStaticParams dengan revalidate untuk membangun terlebih dahulu halaman dinamis yang populer dan memvalidasi ulang halaman tersebut sesuai jadwal.
// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly
export async function generateStaticParams() {
const posts = await getTopPosts(100);
return posts.map(p => ({ slug: p.slug }));
}
export default async function PostPage({ params }) {
const post = await getPost(params.slug);
return <Article post={post} />;
}Validasi Ulang Sesuai Permintaan
Panggil revalidatePath() atau revalidateTag() dari Aksi Server, rute API, atau pengendali webhook untuk segera membuat ulang halaman tertentu—tanpa menunggu selang waktu.
// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
export async function POST(req: Request) {
const { secret, path } = await req.json();
if (secret !== process.env.REVALIDATION_SECRET) {
return Response.json({ error: 'Invalid secret' }, { status: 401 });
}
revalidatePath(path);
return Response.json({ revalidated: true, path });
}Perilaku Cadangan untuk Rute Tidak Dikenal
Untuk rute dinamis yang tidak tercantum dalam generateStaticParams, tetapkan dynamicParams = true (bawaan) untuk merender sesuai permintaan dan melakukan caching, atau false untuk mengembalikan 404.
// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParamsMenyajikan Versi Lama Selama Validasi Ulang
Selama pembuatan ulang, Next.js menyajikan halaman lama hingga versi baru siap. Pengguna selalu mendapatkan respons tanpa harus menunggu data terbaru.
ISR vs SSR vs Statis
Statis: dibangun sekali dan tidak pernah berubah. ISR: dibangun terlebih dahulu dan dibuat ulang sesuai jadwal. SSR: dirender ulang pada setiap permintaan. Pilih ISR untuk konten yang sesekali berubah tetapi tetap memperoleh manfaat dari kecepatan penyajian statis.
Hal yang Perlu Diperhatikan tentang ISR
ISR tidak cocok untuk konten yang dipersonalisasi, yaitu data khusus pengguna, atau data yang harus tersedia secara waktu nyata. Untuk hal tersebut, gunakan pengambilan no-store dan SSR.
ISR pada Perute Halaman (getStaticProps)
Pada Perute Halaman, ISR menggunakan getStaticProps dengan nilai kembalian revalidate—konsepnya sama, tetapi API-nya berbeda.
// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
const posts = await getPosts();
return { props: { posts }, revalidate: 60 };
}Memverifikasi ISR
Periksa header respons x-nextjs-cache: HIT berarti disajikan dari cache, MISS berarti baru saja dirender, dan STALE berarti versi lama disajikan saat validasi ulang berlangsung.
Pemeriksaan Singkat
Apa yang terjadi ketika pengguna meminta halaman ISR yang periode validasi ulangnya baru saja berakhir?
Ringkasan
ISR membangun halaman terlebih dahulu dan memvalidasinya ulang setiap N detik melalui export const revalidate = N. Gunakan generateStaticParams untuk rute dinamis yang populer dan validasi ulang sesuai permintaan melalui revalidatePath/Tag agar data segera mutakhir setelah mutasi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pembuatan Ulang Situs Statis Bertahap (ISR)” gratis?
Ya — teks lengkap “Pembuatan Ulang Situs Statis Bertahap (ISR)” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pembuatan Ulang Situs Statis Bertahap (ISR)”?
Buat ulang halaman statis sesuai jadwal atau sesuai permintaan tanpa menerapkan ulang seluruh aplikasi. Kamu berlatih React 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 React Academy?
Tidak diperlukan pengalaman sebelumnya. React 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 3 dari 4.
Berapa lama pelajaran “Pembuatan Ulang Situs Statis Bertahap (ISR)” 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 React Academy ini?
Ya. Setiap pelajaran React 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
- fetch() dengan Opsi Tembolok di Next.js
- unstable_cache & React cache()
- Pembuatan Ulang Situs Statis Bertahap (ISR)
- Server Actions untuk Mutasi Data