اگلے آنے والے.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 کو رکھتا ہے تاکہ back/forward اور دوبارہ navigation فوری ہوں۔

## 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` کو کال کرتے ہیں تاکہ متعلقہ صفحات دوبارہ fetch کریں اور صارفین کو تبدیلی نظر آئے۔

## عام مسئلہ

```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 defaults Next versions میں تبدیل ہوئے ہیں — اپنا ورژن چیک کریں، کیونکہ کچھ حالیہ ورژنز ڈیفالٹ طور پر کم جارحانہ طریقے سے cache کرتے ہیں۔)

## یہ کیوں اہم ہے

Next.js کی جارحانہ multi-layer caching یہی ہے جو اسے تیز بناتی ہے، لیکن یہ "میرا ڈیٹا پرانا کیوں ہے؟" الجھن کا #1 ذریعہ بھی ہے۔

چار layers کو جاننا، Data Cache کو ہر fetch میں کنٹرول کرنا (`no-store`/`revalidate`/tags)، اور mutations کے بعد `revalidatePath`/`revalidateTag` سے invalidate کرنا کارکردگی اور درست تازگی دونوں حاصل کرنے کے لیے ضروری ہے۔