React Academy · درس

إعادة التوليد الساكن التدريجي (ISR)

أعِد توليد الصفحات الساكنة وفق جدول زمني أو عند الطلب دون إعادة نشر كاملة.

إعادة التوليد الساكن التدريجي (ISR) درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

ما المقصود بـ ISR؟

تتيح إعادة التوليد التدريجي للصفحات الثابتة لـ Next.js عرض صفحة ثابتة مبنية مسبقًا، مع إعادة توليدها في الخلفية بعد فترة زمنية محددة، وبذلك تجمع بين سرعة HTML الثابت وحداثة التصيير من جانب الخادم.

آلية عمل ISR

في الطلب الأول، يعرض Next.js ملف HTML الثابت المخزن مؤقتًا. بعد انتهاء فترة إعادة التحقق، يطلق الطلب التالي إعادة التوليد في الخلفية. وتعرض الطلبات اللاحقة الصفحة الجديدة بمجرد اكتمال إعادة التوليد.

تفعيل ISR باستخدام revalidate

صدّر ثابتًا باسم revalidate أو اضبط next: { revalidate: N } في استدعاء fetch داخل صفحة مكوّن خادم.

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

ISR مع المسارات الديناميكية

ادمج generateStaticParams مع revalidate لبناء الصفحات الديناميكية الشائعة مسبقًا وإعادة التحقق منها وفق جدول زمني.

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

إعادة التحقق عند الطلب

استدعِ revalidatePath() أو revalidateTag() من إجراء خادم أو مسار API أو معالج webhook لإعادة توليد صفحات محددة فورًا، من دون انتظار انتهاء الفترة الزمنية.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

السلوك الاحتياطي للمسارات غير المعروفة

بالنسبة إلى المسارات الديناميكية غير الموجودة في generateStaticParams، اضبط dynamicParams = true (وهي القيمة الافتراضية) لتصييرها عند الطلب وتخزينها مؤقتًا، أو اضبطها على false لإرجاع 404.

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

العرض القديم أثناء إعادة التحقق

أثناء إعادة التوليد، يعرض Next.js الصفحة القديمة إلى أن تصبح النسخة الجديدة جاهزة. ويحصل المستخدمون دائمًا على استجابة، من دون انتظار البيانات الحديثة.

مقارنة ISR وSSR والتصيير الثابت

التصيير الثابت: تُبنى الصفحة مرة واحدة ولا تتغير أبدًا. ISR: تُبنى مسبقًا وتُعاد توليدها وفق جدول زمني. SSR: تُصيَّر من جديد مع كل طلب. اختر ISR للمحتوى الذي يتغير أحيانًا ويستفيد في الوقت نفسه من سرعة عرض المحتوى الثابت.

محاذير ISR

لا تناسب ISR المحتوى المخصص (البيانات الخاصة بكل مستخدم) أو البيانات التي يجب أن تكون آنية. استخدم لهذه الحالات عمليات fetch مع no-store والتصيير من جانب الخادم.

ISR في Pages Router ‏(getStaticProps)

في Pages Router، تستخدم ISR ‏getStaticProps مع قيمة إرجاع باسم revalidate؛ أي المفهوم نفسه ولكن بواجهة برمجية مختلفة.

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

التحقق من ISR

تحقق من رأس الاستجابة x-nextjs-cache: تشير HIT إلى أن الاستجابة عُرضت من التخزين المؤقت، وتشير MISS إلى أنها صُيّرت حديثًا، وتشير STALE إلى عرض نسخة قديمة أثناء إعادة التحقق.

تحقق سريع

ماذا يحدث عندما يطلب مستخدم صفحة ISR وقد انتهت فترة إعادة التحقق الخاصة بها للتو؟

مراجعة

تبني ISR الصفحات مسبقًا وتعيد التحقق منها كل N ثانية باستخدام export const revalidate = N. استخدم generateStaticParams للمسارات الديناميكية الشائعة، واستخدم إعادة التحقق عند الطلب عبر revalidatePath/Tag للحصول على تحديث فوري بعد عمليات التعديل.

الأسئلة الشائعة

هل درس «إعادة التوليد الساكن التدريجي (ISR)» مجاني؟

نعم — نص درس «إعادة التوليد الساكن التدريجي (ISR)» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعادة التوليد الساكن التدريجي (ISR)»؟

أعِد توليد الصفحات الساكنة وفق جدول زمني أو عند الطلب دون إعادة نشر كاملة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «إعادة التوليد الساكن التدريجي (ISR)»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

‏fetch() مع خيارات التخزين المؤقت في Next.js
‏unstable_cache وReact cache()
إعادة التوليد الساكن التدريجي (ISR)
إجراءات الخادم لطفرات البيانات

← العودة إلى React Academy