Static vs Dynamic Rendering — CompileDaily Study

Penjelasan

Next.js secara OTOMATIS menentukan apakah sebuah halaman di-render STATIS (sekali saat build, hasilnya di-cache dan dipakai ulang — cepat) atau DINAMIS (di-render ulang tiap request — perlu untuk data yang selalu berubah/personal per user). Memakai fungsi seperti cookies() atau searchParams membuat halaman otomatis jadi dinamis; fetch() bisa dikontrol lewat opsi cache/revalidate.

Contoh Konsep

// Static (default) — di-cache selamanya sampai di-build ulang:
async function ambilData() {
    const res = await fetch('https://api.contoh.com/produk');
    return res.json();
}

// Revalidate tiap 60 detik (Incremental Static Regeneration):
async function ambilDataRevalidate() {
    const res = await fetch('https://api.contoh.com/produk', { next: { revalidate: 60 } });
    return res.json();
}

// Selalu dynamic, tidak pernah di-cache:
async function ambilDataDinamis() {
    const res = await fetch('https://api.contoh.com/produk', { cache: 'no-store' });
    return res.json();
}

Praktikum

Tulis dua versi fetch() untuk endpoint 'https://api.contoh.com/harga-saham': satu dengan { cache: 'no-store' } untuk data yang harus selalu terbaru, satu lagi dengan { next: { revalidate: 300 } } untuk data yang boleh sedikit basi (5 menit).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Data yang berubah CEPAT dan harus SELALU akurat (mis. harga saham, status pembayaran) butuh { cache: 'no-store' } — data yang jarang berubah (mis. daftar artikel blog) lebih cocok revalidate beberapa menit/jam, supaya server tidak perlu fetch ulang di setiap request tapi tetap cukup up-to-date.