هذه هي الاستراتيجيات الثلاث الرئيسية لتحديد متى يتم إنشاء HTML الصفحة. يوازن اختيار الصحيح لكل صفحة بين التحديث والأداء وتكلفة الخادم.
SSG — Static Site Generation (في وقت البناء)
() {
posts = (, { : }).( r.());
;
}
يتم عرض الصفحة مسبقًا إلى HTML ثابت في البناء وتخزينها في ذاكرة التخزين المؤقت على CDN. التسليم الأسرع الممكن، لكن المحتوى ثابت حتى البناء التالي. الأفضل للمحتوى الذي يتغير نادرًا: صفحات التسويق والمستندات والمدونات.
// HTML generated FRESH on every request
export default async function Page() {
const data = await fetch("...", { cache: "no-store" }).then(r => r.json());
return <Dashboard data={data} />;
}
يعرض الخادم الصفحة لكل طلب، لذا البيانات دائمًا محدثة — على حساب الاستجابات الأبطأ وحمل الخادم على كل زيارة. الأفضل للبيانات الشخصية أو البيانات المحدثة دائمًا: لوحات المراقبة وصفحات الحساب ونتائج البحث.
// 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 <Products items={products} />;
}
يعرض ISR HTML ثابتًا (سريع وفي ذاكرة التخزين المؤقت CDN) لكن يعيد التحقق منه في الخلفية وفقًا لجدول زمني — لذا تحصل على أداء ثابتة مع بيانات محدثة دوريًا، دون إعادة بناء الموقع بالكامل. الأفضل للمحتوى الذي يتغير أحيانًا: قوائم المنتجات والأخبار وجداول المتصدرين.
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 يوازن بين الاثنين — يسمح لك بتحسين كل صفحة للمزج الصحيح من الأداء وتحديث البيانات.