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 (सबैभन्दा बढी tune गर्ने)

```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 र re-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 को आक्रामक बहु-स्तरीय caching यसलाई छिटो बनाउँछ, तर यो "मेरो डेटा किन पुरानो छ?" भ्रमको #1 स्रोत पनि छ।

चार layers थाहा पाउनु, प्रत्येक-fetch (`no-store`/`revalidate`/tags) मा Data Cache नियन्त्रण गर्नु, र mutations पछि `revalidatePath`/`revalidateTag` संग invalidate गर्नु दुवै कार्यक्षमता र सही ताजापन पाउनको लागि आवश्यक छ।