React Academy · Pelajaran

fetch() dengan Opsi Tembolok di Next.js

Gunakan opsi force-cache, no-store, dan revalidate pada fetch untuk mengatur perilaku penyimpanan tembolok.

Pelajaran 1 dari 413 langkah

fetch() dengan Opsi Tembolok di Next.js adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

fetch yang Diperluas di Next.js

Next.js memperluas API asli fetch() dengan opsi next untuk mengontrol penembolokan dan validasi ulang. Fitur ini hanya berfungsi dalam Komponen Server dan pengendali rute.

force-cache (Bawaan)

Secara bawaan, fetch() dalam Next.js menggunakan force-cache—respons tersebut disimpan tanpa batas waktu dan digunakan kembali untuk semua permintaan hingga divalidasi ulang secara eksplisit.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

no-store — Selalu Terbaru

no-store menonaktifkan penembolokan sepenuhnya. Setiap permintaan mencapai sumber asal. Gunakan untuk data yang dipersonalisasi atau sensitif.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — ISR Berbasis Waktu

Opsi next.revalidate menyimpan respons dalam cache, tetapi memvalidasinya ulang setiap N detik di latar belakang (pola stale-while-revalidate).

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

revalidate pada Tingkat Segmen

Ekspor konstanta revalidate dari halaman atau tata letak untuk menerapkan interval validasi ulang pada semua pengambilan dalam segmen tersebut.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — Validasi Ulang Berbasis Tag

Tetapkan tag pada panggilan pengambilan dengan next.tags. Gunakan revalidateTag(tag) dalam Aksi Server atau pengendali rute untuk membatalkan semua cache bertag sesuai permintaan.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) membatalkan cache untuk jalur URL tertentu, sehingga jalur tersebut dibuat ulang pada permintaan berikutnya.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

Pengecualian Fungsi Dinamis

Memanggil cookies(), headers(), atau membaca searchParams dalam halaman menjadikannya dinamis—penembolokan dinonaktifkan sepenuhnya untuk halaman tersebut.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

Deduplikasi

Next.js menghapus duplikasi panggilan pengambilan yang identik dalam satu proses render—jika dua Komponen Server mengambil URL yang sama, hanya satu permintaan HTTP yang dibuat.

Memoisasi Permintaan vs Cache

Ada dua lapisan cache: Memoisasi Permintaan (deduplikasi per permintaan, otomatis) dan Cache Data (persisten, dikontrol oleh opsi cache/revalidate).

Men-debug Perilaku Cache

Jalankan next build dan periksa keluaran pembangunan—setiap rute menampilkan strategi perenderannya: Statis (tersimpan dalam cache), Dinamis (tanpa cache), atau ISR (interval validasi ulang).

Pemeriksaan Singkat

Opsi cache fetch mana yang sebaiknya digunakan untuk data yang jarang berubah tetapi harus diperbarui tanpa pembangunan ulang sepenuhnya?

Jawab di pelajaran interaktif

Ringkasan

Gunakan cache: 'force-cache' untuk data statis, cache: 'no-store' untuk data yang selalu terbaru, dan next: { revalidate: N } untuk ISR. Beri tag pada pengambilan dengan next.tags dan panggil revalidateTag() untuk pembatalan sesuai permintaan. Fungsi dinamis secara otomatis membuat halaman tidak ikut dalam penembolokan.

Gratis untuk memulai

Belajar React dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 88
Pelajaran: 324

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “fetch() dengan Opsi Tembolok di Next.js” gratis?

Ya — teks lengkap “fetch() dengan Opsi Tembolok di Next.js” 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 “fetch() dengan Opsi Tembolok di Next.js”?

Gunakan opsi force-cache, no-store, dan revalidate pada fetch untuk mengatur perilaku penyimpanan tembolok. 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 1 dari 4.

Berapa lama pelajaran “fetch() dengan Opsi Tembolok di Next.js” 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

← Kembali ke React Academy