0Pricing
Next.js 15 Fullstack Web Apps · Pelajaran

Caching, Revalidasi, dan Streaming

Kuasai cara App Router menyimpan data yang diambil dalam cache, melakukan revalidasi sesuai jadwal atau sesuai permintaan, serta melakukan streaming UI dengan Suspense agar pemuatan terasa cepat.

Caching, Revalidasi, dan Streaming adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 4 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 Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Why Caching Matters

Refetching the same data on every request is slow and expensive. The App Router caches results so repeated requests are instant, while giving you control over how fresh that data stays.

The Default fetch Cache

In Server Components, the built-in fetch is extended. By default Next.js may cache responses so the same URL is not refetched within a render. You opt into freshness explicitly.

const res = await fetch('https://api.example.com/posts');
const posts = await res.json();

Forcing Fresh Data

For data that must always be current, disable caching with cache: no-store. Each request hits the source.

const res = await fetch(url, { cache: 'no-store' });

Time-Based Revalidation (ISR)

Incremental Static Regeneration serves cached data but refreshes it after a set interval. Use the next.revalidate option, in seconds.

const res = await fetch(url, {
  next: { revalidate: 60 },  // refresh at most once per minute
});

Route Segment Config

You can also set revalidation for a whole route by exporting a segment config constant.

export const revalidate = 3600;  // revalidate this route hourly

On-Demand Revalidation

When data changes (e.g. after a publish), revalidate immediately instead of waiting. Call revalidatePath or revalidateTag from a Server Action or route handler.

import { revalidatePath } from 'next/cache';
revalidatePath('/blog');

Cache Tags

Tag fetches so you can invalidate groups of them at once. Add a tag, then revalidate by that tag later.

await fetch(url, { next: { tags: ['posts'] } });
// later:
revalidateTag('posts');

What Is Streaming?

Streaming sends HTML to the browser in chunks as it becomes ready. Instead of waiting for the slowest data, the page shell appears immediately and slow parts fill in.

Suspense Boundaries

Wrap a slow component in <Suspense> with a fallback. Next.js streams the fallback first, then swaps in the real content when its data resolves.

import { Suspense } from 'react';
<Suspense fallback={<p>Loading feed...</p>}>
  <Feed />
</Suspense>

The loading.js File

An automatic streaming boundary: add a loading.js in a route folder and Next.js shows it instantly while the page segment loads. No manual Suspense needed.

export default function Loading() {
  return <p>Loading page...</p>;
}

Choosing a Strategy

Quick guide:

  • Rarely changes -> default cache
  • Changes on a schedule -> revalidate (ISR)
  • Changes on an event -> on-demand revalidateTag
  • Always live -> no-store

Quick Check

Test your caching knowledge.

Recap

You mastered data freshness and streaming:

  • The App Router caches fetch by default; no-store opts out
  • revalidate enables time-based ISR
  • revalidatePath/revalidateTag invalidate on demand
  • Suspense and loading.js stream UI for fast perceived loads

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Caching, Revalidasi, dan Streaming” gratis?

Ya — teks lengkap “Caching, Revalidasi, dan Streaming” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Caching, Revalidasi, dan Streaming”?

Kuasai cara App Router menyimpan data yang diambil dalam cache, melakukan revalidasi sesuai jadwal atau sesuai permintaan, serta melakukan streaming UI dengan Suspense agar pemuatan terasa cepat. Kamu berlatih Next.js 15 Fullstack Web Apps 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 Next.js 15 Fullstack Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps 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 4 dari 4.

Berapa lama pelajaran “Caching, Revalidasi, dan Streaming” 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 Next.js 15 Fullstack Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps 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

  1. Mendalami Server Components
  2. Client Components dan Interaktivitas
  3. Pola Pengambilan Data Tingkat Lanjut
  4. Caching, Revalidasi, dan Streaming
← Kembali ke Next.js 15 Fullstack Web Apps