ما هي SSR و SSG و ISR في Next.js؟

Question

Accepted Answer

هذه هي الاستراتيجيات الثلاث الرئيسية لتحديد *متى* يتم إنشاء HTML الصفحة. يوازن اختيار الصحيح لكل صفحة بين التحديث والأداء وتكلفة الخادم. ## SSG — Static Site Generation (في وقت البناء) ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` يتم عرض الصفحة مسبقًا إلى HTML ثابت في البناء وتخزينها في ذاكرة التخزين المؤقت على CDN. **التسليم الأسرع الممكن**، لكن المحتوى ثابت حتى البناء التالي. الأفضل للمحتوى الذي يتغير نادرًا: صفحات التسويق والمستندات والمدونات. ## SSR — Server-Side Rendering (عند كل طلب) ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` يعرض الخادم الصفحة لكل طلب، لذا البيانات دائمًا محدثة — على حساب الاستجابات الأبطأ وحمل الخادم على كل زيارة. الأفضل للبيانات الشخصية أو البيانات المحدثة دائمًا: لوحات المراقبة وصفحات الحساب ونتائج البحث. ## ISR — Incremental Static Regeneration (الهجين) ```tsx // Static, but automatically rebuilt in the background every N seconds export const revalidate = 60; // regenerate at most once per 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` يعرض ISR HTML ثابتًا (سريع وفي ذاكرة التخزين المؤقت CDN) لكن **يعيد التحقق** منه في الخلفية وفقًا لجدول زمني — لذا تحصل على أداء ثابتة مع بيانات محدثة دوريًا، دون إعادة بناء الموقع بالكامل. الأفضل للمحتوى الذي يتغير أحيانًا: قوائم المنتجات والأخبار وجداول المتصدرين. ## المقارنة ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` ## لماذا يهم في App Router، تختار هذه لكل جلب عبر خيارات ذاكرة التخزين المؤقت (`force-cache` = SSG، `no-store` = SSR، `revalidate` = ISR) بدلاً من الدوال الخاصة. فهم المقايضة — الثابت هو الأسرع لكن عفا عليه الزمن، SSR محدث لكن مكلف، ISR يوازن بين الاثنين — يسمح لك بتحسين كل صفحة للمزج الصحيح من الأداء وتحديث البيانات.