Next.jsmedium

Data fetching w App Router — jak Next.js domyślnie cachuje `fetch()`?

Tagi

#fetch#revalidate#cache

Odpowiedź

W Server Components Next może cachować wyniki `fetch()` i deduplikować requesty. Możesz to wyłączyć przez `cache: 'no-store'` albo ustawić revalidate przez `next: { revalidate: sekundy }`, żeby kontrolować świeżość.

const res = await fetch('https://example.com/api', {
  next: { revalidate: 60 },
})

Odpowiedź zaawansowana

Głębiej

W App Router `fetch()` używany w **Server Components** korzysta z cachowania Next.js:

**Request memoization**: identyczne fetche w trakcie jednego renderu są deduplikowane.
**Data cache** (jeśli dozwolone): wyniki mogą być współdzielone między requestami, co daje efekt SSG/ISR.

Domyślnie Next cachuje requesty typu GET, gdy może (podobnie do `force-cache`). Cache możesz wyłączyć albo kontrolować świeżość przez revalidate.

Sterowanie

Wyłącz cache (SSR):

await fetch(url, { cache: 'no-store' })

Revalidate co N sekund (ISR):

await fetch(url, { next: { revalidate: 60 } })

Co może wymusić dynamiczność

Odczyt wartości per request, np. `cookies()` lub `headers()`, może zrobić trasę dynamiczną i wpłynąć na cache.

Typowe pułapki

Założenie, że client-side `fetch` używa tego samego cache (nie — to cache przeglądarki).
Headers/credentials wpływają na klucz cache.

Powiązane pytania

Next.js

Pobieranie danych w App Router: co zmieniają `cache: 'no-store'` i `revalidate`?

#nextjs#fetch#cache

Next.js

Unieważnianie cache: co robią `revalidatePath` i `revalidateTag`?

#nextjs#cache#revalidate

Next.js

Co robi `router.refresh()` w App Router (i kiedy go użyć)?

#nextjs#router