Cilat shtresa cache-i ka Next.js?

Question

Accepted Answer

App Router ka **shumë shtresa cache-i** që punojnë së bashku. Shprehja e tyre shpjegon pse të dhënat ndonjëherë duken të vjetruara dhe si të kontrolloni freskësinë.

## Katër cache-t

```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 (ai që ju rregulloni më shumë)

```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 dhe 4. Route cache-t

**Full Route Cache** ruan rrugët e paraqitura statikisht; **Router Cache** mban rrugët e vizituara më parë në shfletues, kështu që kthimi/përpara dhe ri-navigimi janë të çastit.

## Invalidimi i cache-ve gjatë mutacionit

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

Pas krijimit/përditësimit të të dhënave (shpesh në një Server Action), ju thërrisni `revalidatePath`/`revalidateTag` në mënyrë që faqet e prekura të ri-mesin dhe përdoruesit të shohin ndryshimin.

## Malesha e zakonshme

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

(Shënim: parazgjedhjet e cache janë zhvendosur në të gjitha versionet e Next.js — kontrolloni versionin tuaj, pasi disa versione të fundit cache më pak agresivisht në mënyrë parazgjedhur.)

## Pse ka rëndësi

Cacheing-u agresiv shumë-shtresor i Next.js-it është ajo që e bën të shpejtë, por është gjithashtu burimi #1 i hutimit "pse janë të dhënat e mia të vjetruara?".

Të njihni katër shtresat, të kontrolloni Data Cache për secilën thirrje (`no-store`/`revalidate`/tags), dhe të invalidoni me `revalidatePath`/`revalidateTag` pas mutacioneve është thelbësor për të arritur performancën dhe freskësinë e duhur.