Kokius spartinimo sluoksnius turi Next.js?

Question

IT Interview Practice · Accepted Answer

App Router turi **kelis spartinimo sluoksnius**, kurie veikia kartu. Jų supratimas paaiškina, kodėl duomenys kartais atrodo pasenę, ir kaip kontroliuoti duomenų aktualumą.

## Keturi spartinimo sluoksniai

```text
1. Request Memoization — dedupes identical fetch() calls within ONE render pass
2. Data Cache          — persists fetch() results across requests & deploys (server)
3. Full Route Cache    — caches the rendered HTML/RSC of static routes (build time)
4. Router Cache        — client-side cache of visited routes (in the browser, per session)
```

## 1. Request Memoization

```tsx
// the SAME fetch in a layout AND a page → only ONE network request per render
const user = await fetch("/api/user"); // automatically deduped
```

## 2. Data Cache (tas, kurį reguliuojate dažniausiai)

```tsx
fetch(url, { cache: "force-cache" });       // cached (default) — like SSG
fetch(url, { cache: "no-store" });          // never cached — fresh every request
fetch(url, { next: { revalidate: 60 } });   // cached, refreshed every 60s — ISR
fetch(url, { next: { tags: ["posts"] } });  // taggable for on-demand invalidation
```

## 3 ir 4. Route spartinimo sluoksniai

**Full Route Cache** saugo statiškai atrenduotus maršrutus; **Router Cache** išsaugo anksčiau aplankytus maršrutus naršyklėje, todėl atgal/pirmyn navigacija ir pakartota navigacija yra momentinė.

## Spartinimo sluoksnių anuliavimas mutacijos metu

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

revalidatePath("/blog");        // invalidate a specific route's cache
revalidateTag("posts");         // invalidate every fetch tagged "posts"
router.refresh();               // (client) clear the Router Cache for current route
```

Sukūrę/atnaujinę duomenis (dažnai Server Action metu), iškviečiate `revalidatePath`/`revalidateTag`, kad paveikti puslapiai iš naujo gautų duomenis ir vartotojai matytų pakeitimą.

## Dažna klaida

```text
"Why is my data stale after an update?" → a cache (usually Data or Router cache)
is serving the old value. Fix: revalidateTag/revalidatePath after the mutation,
or use cache: "no-store" for always-fresh data.
```

(Pastaba: spartinimo numatytosios reikšmės pasikeitė per skirtingas Next versijas — patikrinkite savo versiją, nes kai kurios naujos versijos pagal numatytuosius nustatymus mažiau agresyviai spartina.)

## Kodėl tai svarbu

Next.js agresyvus daugiasluoksnis spartinimas yra tai, kas jį pagreitina, tačiau tai yra pirma „kodėl mano duomenys pasenę?

Keturi spartinimo sluoksniai

1. Request Memoization

2. Data Cache (tas, kurį reguliuojate dažniausiai)

3 ir 4. Route spartinimo sluoksniai

Spartinimo sluoksnių anuliavimas mutacijos metu

Dažna klaida

Kodėl tai svarbu

Susiję klausimai