React Academy · Lekcja

fetch() z opcjami cache w Next.js

Używanie opcji force-cache, no-store i revalidate w fetch do kontrolowania zachowania buforowania.

fetch() z opcjami cache w Next.js to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Rozszerzone fetch w Next.js

Next.js rozszerza natywne API fetch() o opcję next służącą do sterowania buforowaniem i ponowną walidacją. Działa to wyłącznie w komponentach serwerowych i handlerach tras.

force-cache (domyślnie)

Domyślnie fetch() w Next.js używa force-cache — buforuje odpowiedź bezterminowo i ponownie wykorzystuje ją dla wszystkich żądań, aż do jawnej ponownej walidacji.

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

no-store — zawsze aktualne dane

no-store całkowicie wyłącza buforowanie. Każde żądanie trafia do serwera źródłowego. Należy używać tej opcji dla danych spersonalizowanych lub wrażliwych.

// 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 zależne od czasu

Opcja next.revalidate buforuje odpowiedź, ale w tle ponownie ją waliduje co N sekund (wzorzec 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 na poziomie segmentu

Eksportuj stałą revalidate ze strony lub layoutu, aby zastosować interwał ponownej walidacji do wszystkich operacji fetch w tym segmencie.

// 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 — ponowna walidacja na podstawie tagów

Przypisuj tagi do wywołania fetch za pomocą next.tags. Użyj revalidateTag(tag) w Server Action lub handlerze trasy, aby na żądanie unieważnić wszystkie pamięci podręczne oznaczone tymi tagami.

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) unieważnia pamięć podręczną dla określonej ścieżki URL, powodując jej ponowne wygenerowanie przy następnym żądaniu.

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

Rezygnacja z buforowania przez funkcje dynamiczne

Wywołanie cookies() lub headers(), a także odczytanie searchParams w stronie sprawia, że staje się ona dynamiczna — całkowicie rezygnuje z buforowania tej strony.

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} />;
}

Usuwanie duplikatów

Next.js usuwa duplikaty identycznych wywołań fetch w ramach jednego przebiegu renderowania — jeśli dwa komponenty serwerowe pobierają ten sam adres URL, wykonywane jest tylko jedno żądanie HTTP.

Memoizacja żądań a pamięć podręczna

Istnieją dwie warstwy pamięci podręcznej: memoizacja żądań (automatyczne usuwanie duplikatów w ramach żądania) oraz pamięć danych (trwała, sterowana opcjami cache/revalidate).

Debugowanie działania pamięci podręcznej

Uruchom next build i sprawdź wynik budowania — każda trasa pokazuje swoją strategię renderowania: Static (buforowanie), Dynamic (brak buforowania) lub ISR (interwał ponownej walidacji).

Szybkie sprawdzenie

Którą opcję buforowania fetch należy wybrać dla danych, które zmieniają się rzadko, ale powinny być aktualizowane bez pełnego ponownego wdrażania?

Podsumowanie

Używaj cache: 'force-cache' dla danych statycznych, cache: 'no-store' dla danych zawsze aktualnych oraz next: { revalidate: N } dla ISR. Oznaczaj wywołania fetch tagami za pomocą next.tags i wywołuj revalidateTag(), aby na żądanie unieważniać pamięć podręczną. Funkcje dynamiczne automatycznie wyłączają buforowanie stron.

Często zadawane pytania

Czy lekcja „fetch() z opcjami cache w Next.js” jest bezpłatna?

Tak — pełny tekst „fetch() z opcjami cache w Next.js” 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „fetch() z opcjami cache w Next.js”?

Używanie opcji force-cache, no-store i revalidate w fetch do kontrolowania zachowania buforowania. Ćwiczysz React Academy 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ąć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy 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 1 z 4.

Ile czasu zajmuje lekcja „fetch() z opcjami cache w Next.js”?

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 React Academy?

Tak. Każda lekcja React Academy 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

← Powrót do React Academy