كيف يعمل الاستبدال حسب الطلب (ISR)؟

Question

Accepted Answer

**الاستبدال حسب الطلب** يتيح لك إلغاء الصفحات المخزنة مؤقتًا/الثابتة **بالضبط عندما تتغير البيانات** — بدلاً من انتظار فترة زمنية محددة. إنه المكمل الدقيق للاستبدال القائم على الوقت (`revalidate: N`).

## القائم على الوقت مقابل حسب الطلب

```tsx
// Time-based: page refreshes on a fixed schedule (may serve stale data up to N seconds)
export const revalidate = 3600; // every hour

// On-demand: refresh the INSTANT the underlying data changes — no waiting, no waste
```

الاستبدال القائم على الوقت بسيط لكنه غير مثالي: إذا كان قصيرًا جدًا = إعادة إنشاء غير ضرورية؛ إذا كان طويلًا جدًا = محتوى قديم. يحل الاستبدال حسب الطلب هذه المشكلة بتفعيل الاستبدال من الكود الخاص بك عندما يحدث تغيير فعلي.

## واجهات برمجية الاستبدال حسب الطلب

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

// 1. Tag your fetches, then invalidate by tag
await fetch("https://api/posts", { next: { tags: ["posts"] } });
revalidateTag("posts");      // refresh EVERY page/fetch tagged "posts"

// 2. Or invalidate a specific path
revalidatePath("/blog/my-post");
```

## سير عمل حقيقي: CMS webhook

```ts
// app/api/revalidate/route.ts — called by your CMS when an editor publishes
import { revalidateTag } from "next/cache";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const secret = req.nextUrl.searchParams.get("secret");
  if (secret !== process.env.REVALIDATE_SECRET) {       // verify it's really your CMS
    return NextResponse.json({ ok: false }, { status: 401 });
  }
  revalidateTag("posts");                                // rebuild affected pages now
  return NextResponse.json({ revalidated: true });
}
```

التدفق: المحرر ينشر في نظام إدارة المحتوى → نظام إدارة المحتوى يستدعي webhook خاصتك → `revalidateTag("posts")` يلغي الذاكرة المؤقتة → الزائر التالي يحصل على HTML ثابت تم إعادة إنشاؤه للتو. تبقى الصفحات سريعة وثابتة **و** تتحدث فورًا عند النشر.

## بعد طفرة Server Action

```tsx
"use server";
export async function createPost(data) {
  await db.post.create({ data });
  revalidateTag("posts"); // user sees their new post immediately
}
```

## لماذا يهم هذا

الاستبدال حسب الطلب يعطيك الكأس المقدسة: **أداء ثابت مع تحديث في الوقت الفعلي**.

بدلاً من تخمين فترة الاستبدال، تلغي بالضبط عندما يتغير المحتوى — عبر webhooks (نشر نظام إدارة المحتوى) أو بعد طفرات Server Action — باستخدام `revalidateTag`/`revalidatePath`.

يلغي كل من المحتوى القديم والإعادة المفرطة والمهدرة للموارد، مما يجعل ISR عمليًا للمحتوى الذي يتحدث بطريقة غير متوقعة.