Data & Caching · Modul 9 dari 23

Data Fetching & Caching Strategy di Next.js 16

Mendalami arsitektur Fetch API, Request Memoization, Static Rendering vs Dynamic Rendering pada Next.js 16.

🎯 Poin-Poin Utama Modul Ini:

Penggunaan native fetch() di Server Components otomatis memanfaatkan Request Deduplication
Model caching transparan: Static Rendering (default) vs Dynamic Rendering (cache: 'no-store')
Memahami 4 lapisan cache Next.js: Request Memoization, Data Cache, Full Route Cache, Router Cache

Next.js memperluas fungsi bawaan Web API fetch() dengan kemampuan caching dan revalidasi deklaratif di tingkat server.

Pilihan Opsi Fetch:

fetch(url, { cache: 'force-cache' }): Static Data Cache permanen (default).
fetch(url, { cache: 'no-store' }): Dynamic Data Fetch (selalu mengambil data terbaru tiap request).
fetch(url, { next: { revalidate: 3600 } }): Incremental Static Regeneration (ISR) setiap 1 jam.