1️⃣ Request Memoization

💡 تعریف

• Memoization روی سطح درخواست (request-level)
• Next.js وقتی داده‌ای رو fetch می‌کنه در همان درخواست، دوباره اون fetch رو تکرار نمی‌کنه، بلکه نتیجه قبلی رو استفاده می‌کنه.
• Scope: فقط همان request، بعدش پاک میشه.
• برای server components کاربرد داره، وقتی چند کامپوننت یا hook یکسان در همان render اجرا میشه.

⚡️ مثال

// app/dashboard/page.tsx
async function getUser() {
  console.log("fetching user...");
  const res = await fetch("https://api.example.com/user");
  return res.json();
}

export default async function Dashboard() {
  const user1 = await getUser();
  const user2 = await getUser(); // request memoization فعال باشه → fetch دوباره اجرا نمیشه
  return <div>{user1.name} - {user2.name}</div>;
}

سناریو عملی:

• وقتی یک Server Component چند بار fetch یک resource یکسان در همان render صدا زده میشه، memoization جلوی duplicate request می‌گیره.
• سرعت رندر بیشتر میشه و فشار روی API کاهش پیدا می‌کنه.

---

2️⃣ Data Cache

💡 تعریف

• Cache روی سطح داده / fetch
• Next.js اجازه میده داده‌هایی که fetch می‌کنی برای چندین request بعدی cache بشن.
• میتونه stale-while-revalidate باشه یا زمان expiry مشخص داشته باشه (next: { revalidate: 60 })

⚡️ مثال

export async function getProducts() {
  const res = await fetch("https://api.example.com/products", {
    next: { revalidate: 60 } // cache 60 ثانیه
  });
  return res.json();
}

سناریو عملی:

• کاربری صفحه product list رو باز می‌کنه → fetch میشه و cache میشه.
• کاربر دوم که 30 ثانیه بعد میاد، fetch دوباره اجرا نمیشه و داده از cache میاد.
• بعد از 60 ثانیه cache ریفرش میشه.

---

3️⃣ Full Route Cache (Full Page Cache)

💡 تعریف

• کل route (صفحه یا route handler) cache میشه
• Next.js میتونه کل خروجی یک route (HTML یا JSON) رو cache کنه.
• به جای اینکه هر بار کامپوننت یا fetch اجرا بشه، کل route یک response از cache میده

⚡️ مثال

// app/products/page.tsx
export const revalidate = 120; // full page cache 2 دقیقه

export default async function ProductsPage() {
  const products = await fetch("https://api.example.com/products").then(r => r.json());
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

سناریو عملی:

• کاربر اول میاد → صفحه render میشه و cache میشه.
• کاربر دوم در عرض 2 دقیقه → همان HTML cache شده مستقیماً برگشت داده میشه، نه fetch مجدد.
• مناسب صفحات mostly static که تغییرات کم دارند.

---

4️⃣ Route Cache (Partial Route Cache)

💡 تعریف

• Cache روی سطح route handler یا fetch خاص
• با cache: "force-cache" یا cache: "no-store" میتونی رفتار cache را کنترل کنی.
• تفاوت با full route cache: کل صفحه cache نمیشه، فقط داده‌ها یا fetchها cache میشن

⚡️ مثال

// app/api/products/route.ts
export async function GET() {
  const products = await fetch("https://api.example.com/products", { cache: "force-cache" }).then(r => r.json());
  return Response.json(products);
}

سناریو عملی:

• صفحه React میاد /products → fetch route /api/products
• fetch cache شده → چندین request بعدی به /api/products داده cached میگیره، ولی کل HTML صفحه cache نشده
• مناسب SPA data fetching که میخوای سریع باشه ولی کل صفحه SSR نباشه.

---

🔹 جمع‌بندی تفاوت‌ها

نوع cache	Scope	مدت زمان	مثال مناسب
Request Memoization	یک درخواست	فقط همان render	جلوگیری از fetchهای تکراری در یک SSR render
Data Cache	چند request	configurable (revalidate)	cache داده API بین کاربران
Route Cache (Partial)	route / fetch	configurable	API route سریع برای SPA
Full Route Cache	کل route / HTML	configurable	صفحات mostly-static مثل landing page