PricingLoginStart free
Next.js 15 Fullstack Web Apps · Lekcja

Buforowanie, rewalidacja i strumieniowanie

Opanuj sposób, w jaki App Router buforuje pobrane dane, rewaliduje je według harmonogramu lub na żądanie oraz strumieniuje interfejs za pomocą Suspense, zapewniając szybkie postrzegane ładowanie.

Lekcja 4 z 413 kroki

Buforowanie, rewalidacja i strumieniowanie to bezpłatna lekcja Next.js 15 Fullstack Web Apps na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Next.js 15 Fullstack Web Apps, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Odpowiedz w interaktywnej lekcji

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
Bezpłatny start

Ucz się TypeScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
12
Lekcje
48
Zacznij naukę bezpłatnieWyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Buforowanie, rewalidacja i strumieniowanie” jest bezpłatna?

Tak — pełny tekst „Buforowanie, rewalidacja i strumieniowanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Next.js 15 Fullstack Web Apps, przejdź na CoddyKit PRO. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Co nauczysz się w „Buforowanie, rewalidacja i strumieniowanie”?

Opanuj sposób, w jaki App Router buforuje pobrane dane, rewaliduje je według harmonogramu lub na żądanie oraz strumieniuje interfejs za pomocą Suspense, zapewniając szybkie postrzegane ładowanie. Ćwiczysz Next.js 15 Fullstack Web Apps z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Next.js 15 Fullstack Web Apps?

Nie wymagamy żadnego doświadczenia. Next.js 15 Fullstack Web Apps w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Buforowanie, rewalidacja i strumieniowanie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Next.js 15 Fullstack Web Apps?

Tak. Każda lekcja Next.js 15 Fullstack Web Apps zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Komponenty serwerowe — pogłębione omówienie
  2. Komponenty klienckie i interaktywność
  3. Zaawansowane wzorce pobierania danych
  4. Buforowanie, rewalidacja i strumieniowanie
← Powrót do Next.js 15 Fullstack Web Apps