Next.js ਵਿੱਚ ਕਿਹੜੀਆਂ caching layers ਹਨ?

Question

Accepted Answer

App Router ਕੋਲ **ਕਈ caching layers** ਹਨ ਜੋ ਇਕੱਠੇ ਕੰਮ ਕਰਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਸਮਝਣਾ ਇਹ ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ ਕਿ ਡੇਟਾ ਕਦੀ ਪੁਰਾਣਾ ਕਿਉਂ ਲਗਦਾ ਹੈ ਅਤੇ ਤਾਜ਼ਗੀ ਨੂੰ ਕਿਵੇਂ ਕੰਟਰੋਲ ਕਰਨਾ ਹੈ।

## ਚਾਰ caches

```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 (ਜੋ ਤੁਸੀਂ ਸਭ ਤੋਂ ਵੱਧ ਟਿਊਨ ਕਰਦੇ ਹੋ)

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

**Full Route Cache** statically rendered routes ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ; **Router Cache** ਪਹਿਲਾਂ ਦੇਖੇ ਗਏ routes ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਰੱਖਦਾ ਹੈ ਤਾਂ ਜੋ ਬੈਕ/ਫਾਰਵਰਡ ਅਤੇ ਮੁੜ-ਨੈਵੀਗੇਸ਼ਨ ਤਤਕਾਲ ਹੋਵੇ।

## Mutation 'ਤੇ caches ਨੂੰ invalidate ਕਰਨਾ

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

ਡੇਟਾ ਬਣਾਉਣ/ਅਪਡੇਟ ਕਰਨ ਤੋਂ ਬਾਅਦ (ਅਕਸਰ ਇੱਕ Server Action ਵਿੱਚ), ਤੁਸੀਂ `revalidatePath`/`revalidateTag` ਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ ਤਾਂ ਜੋ ਪ੍ਰਭਾਵਿਤ ਸਫ਼ਿਆਂ ਨੂੰ ਮੁੜ-ਲਿਆ ਜਾਵੇ ਅਤੇ ਯੂਜ਼ਰ ਬਦਲਾਅ ਦੇਖਣ।

## ਆਮ ਸਮੱਸਿਆ

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

(ਨੋਟ: cache ਡਿਫਾਲਟ ਅਗਲੇ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਬਦਲ ਗਏ ਹਨ — ਆਪਣਾ ਸੰਸਕਰਣ ਚੈੱਕ ਕਰੋ, ਕਿਉਂਕਿ ਕੁਝ ਹਾਲੀਆ ਸੰਸਕਰਣ ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ ਘੱਟ ਆਕ੍ਰਮਣਕਾਰੀ ਤਰੀਕੇ ਨਾਲ cache ਕਰਦੇ ਹਨ।)

## ਇਹ ਮਾਇਨਾ ਰੱਖਦਾ ਹੈ

Next.js ਦੀ ਆਕ੍ਰਮਣਕਾਰੀ ਬਹੁ-ਪਰਤ caching ਇਸਨੂੰ ਤੇਜ਼ ਬਣਾਉਂਦੀ ਹੈ, ਪਰ ਇਹ "ਮਾਰਾ ਡੇਟਾ ਪੁਰਾਣਾ ਕਿਉਂ ਹੈ?" ਉਲਝਣ ਦਾ #1 ਸ੍ਰੋਤ ਵੀ ਹੈ।

ਚਾਰ ਪਰਤਾਂ ਨੂੰ ਜਾਣਨਾ, ਪ੍ਰਤੀ-ਲਿਆ (`no-store`/`revalidate`/tags) 'ਤੇ Data Cache ਨੂੰ ਕੰਟਰੋਲ ਕਰਨਾ, ਅਤੇ mutations ਤੋਂ ਬਾਅਦ `revalidatePath`/`revalidateTag` ਨਾਲ invalidate ਕਰਨਾ ਦੋਨੋਂ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਸਹੀ ਤਾਜ਼ਗੀ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।