Milyen gyorsítótár-rétegek vannak a Next.js-ben?

Question

Accepted Answer

Az App Router **több gyorsítótár-réteggel** rendelkezik, amelyek együttesen működnek. Megértésük elmagyarázza, miért tűnik az adat néha elavultnak, és hogyan szabályozható a frissesség.

## A négy gyorsítótár

```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 (amit a legtöbbet hangol)

```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 & 4. Route gyorsítótárak

A **Full Route Cache** statikus módon renderelt útvonalakat tárol; a **Router Cache** a korábban meglátogatott útvonalakat tartja a böngészőben, így a vissza/előre lépés és az újra navigálás azonnali.

## Gyorsítótárak érvénytelen tétele mutáció során

```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
```

Az adatok létrehozása/frissítése után (gyakran Server Action-ben) a `revalidatePath`/`revalidateTag` függvényt hívja meg, hogy az érintett oldalak újra betöltsenek és a felhasználók lássák a változást.

## A gyakori csapda

```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.
```

(Megjegyzés: a gyorsítótár alapértelmezett értékei a Next verziók között módosultak — ellenőrizze a verzióját, mivel néhány közelmúltbeli verzió kevésbé agresszíven gyorsítótáraz alapértelmezés szerint.)

## Miért fontos

A Next.js agresszív multi-rétegű gyorsítótárazása az, ami gyorssá teszi, de ez is az 1. számú forrása a "miért van az én adat elavult?" zavarodottságnak.

A négy réteg ismerete, a Data Cache per-fetch alapú vezérlése (`no-store`/`revalidate`/tags), és a mutációk után `revalidatePath`/`revalidateTag` segítségével történő érvénytelenítés elengedhetetlen a teljesítmény és a megfelelő frissesség eléréséhez.