Advanced · Level 11: Production Next.jsAdvanced70 menitBahasa Indonesia

Caching Basics

Membangun mental model sederhana tentang data shared, data user-specific, fresh data, dan alasan perubahan tampak berbeda setelah app masuk production.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan cache sebagai keputusan tentang kapan data boleh digunakan kembali
Membedakan data shared dari data yang bergantung pada identity user
Menentukan kapan perubahan membutuhkan revalidation atau request-time data
Mendiagnosis dugaan stale data tanpa langsung menghapus seluruh cache

Next.jsCachingRevalidationData FetchingProduction

Isi lesson

6 blok

1.
Cache adalah kontrak freshness, bukan tombol percepat universalBelum selesaiWajib
2.
Cache public content secara eksplisit, jangan menyamakan dengan profile userBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan memakai cache untuk menutupi data flow yang belum benarBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Cache adalah kontrak freshness, bukan tombol percepat universal

Wajib

Cache menyimpan hasil agar pekerjaan yang sama tidak selalu diulang. Pertanyaan utamanya bukan hanya apakah data dapat dicache, melainkan siapa yang boleh menerima hasil yang sama dan berapa lama hasil itu masih boleh dianggap cukup baru. Daftar artikel publik yang berubah jarang mungkin dapat dibagikan. Dashboard learner, session, atau data yang bergantung pada identity user tidak boleh diperlakukan seperti konten publik bersama.

Pada model caching Next.js saat ini, fetch tidak dicache secara default; cache perlu dipilih secara eksplisit. Revalidation juga menjadi keputusan produk: setelah editor memperbarui katalog course, kapan learner lain perlu melihat perubahan? Untuk module ini, jangan mengejar konfigurasi cache yang rumit. Gunakan mental model: tentukan scope data, tentukan kebutuhan freshness, pilih strategi yang terdokumentasi, lalu uji perubahan pada deployment yang benar. Bila UI tampak lama, pastikan terlebih dahulu deployment dan source data yang dibuka memang yang terbaru.

Bagian ini memengaruhi progres lesson.

Cache public content secara eksplisit, jangan menyamakan dengan profile user

Wajib

tsx

type Course = { slug: string; title: string };

export async function getPublicCourses(): Promise<Course[]> {
  const response = await fetch("https://example.com/api/courses", {
    cache: "force-cache",
  });

  return response.json();
}

export async function getCurrentProfile(userId: string) {
  // Data ini bergantung pada identity user.
  // Tentukan request-time behavior dan authorization secara terpisah.
  return readProfileForUser(userId);
}

Contoh hanya menunjukkan perbedaan keputusan. Data course publik dapat menjadi kandidat cache bila product menerima hasil yang tidak berubah pada setiap request. Profile user tidak otomatis boleh memakai strategi itu hanya karena dibaca dari server. Sebelum menambahkan cache, baca dokumentasi versi Next.js yang dipakai project dan tentukan siapa yang menerima data, bagaimana data berubah, serta bagaimana perubahan itu divalidasi.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Classify production data freshness

Lengkapi data decision map untuk membedakan konten shared yang dapat dipertimbangkan untuk cache dan data user-specific yang membutuhkan request-time authorization.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

3 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Manakah data yang paling membutuhkan keputusan request-time dan authorization per user, bukan diperlakukan sebagai konten publik bersama?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Jangan memakai cache untuk menutupi data flow yang belum benar

Jika app menampilkan data lama, jangan langsung menambah force-cache, no-store, revalidatePath, atau revalidateTag secara acak. Konfirmasi URL deployment, commit yang aktif, environment yang dipakai, dan sumber data terlebih dahulu. Caching dan revalidation punya API yang berkembang antar versi Next.js, jadi selalu cocokkan keputusan dengan dokumentasi versi project, bukan potongan konfigurasi lama dari internet.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Cache adalah keputusan tentang scope dan freshness hasil data.
Data shared dan data user-specific memiliki risiko serta strategi yang berbeda.
Pada Next.js saat ini, fetch tidak dicache secara default; caching dipilih secara eksplisit.
Periksa deployment, source data, dan requirement freshness sebelum mengubah konfigurasi cache.
Berikutnya, kamu akan menyatukan bukti build, environment, log, auth, dan data untuk men-debug deployment secara terarah.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Cache adalah kontrak freshness, bukan tombol percepat universal.

Memuat progres Review module