Next.js এ কি ক্যাশিং লেয়ার রয়েছে?

Question

Accepted Answer

App Router এর **একাধিক ক্যাশিং লেয়ার** রয়েছে যা একসাথে কাজ করে। এগুলি বোঝা ব্যাখ্যা করে যে ডেটা কেন কখনও পুরানো দেখায় এবং তাজা রাখার নিয়ন্ত্রণ কীভাবে করতে হয়।

## চারটি ক্যাশ

```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. রুট ক্যাশ

**Full Route Cache** স্ট্যাটিকভাবে রেন্ডার করা রুট সংরক্ষণ করে; **Router Cache** পূর্বে পরিদর্শিত রুটগুলি ব্রাউজারে রাখে যাতে ফিরে যাওয়া/এগিয়ে যাওয়া এবং পুনঃনেভিগেশন তাৎক্ষণিক হয়।

## মিউটেশনে ক্যাশ অবৈধ করা

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

(দ্রষ্টব্য: ক্যাশ ডিফল্টগুলি Next.js সংস্করণ জুড়ে পরিবর্তিত হয়েছে — আপনার সংস্করণ পরীক্ষা করুন, কারণ কিছু সাম্প্রতিক সংস্করণ ডিফল্টরূপে কম আক্রমণাত্মকভাবে ক্যাশ করে।)

## কেন এটি গুরুত্বপূর্ণ

Next.js এর আক্রমণাত্মক মাল্টি-লেয়ার ক্যাশিং এটিকে দ্রুত করে তোলে, কিন্তু এটি "আমার ডেটা পুরানো কেন?" বিভ্রান্তির #1 উৎস।

চারটি লেয়ার জানা, প্রতিটি ফেচ অনুযায়ী Data Cache নিয়ন্ত্রণ করা (`no-store`/`revalidate`/tags), এবং মিউটেশনের পরে `revalidatePath`/`revalidateTag` দিয়ে অবৈধ করা উভয় কর্মক্ষমতা এবং সঠিক তাজাতা পেতে অপরিহার্য।