التصيير الجزئي المسبق في Next.js: الهيكل الثابت والبث الديناميكي

النقاط الرئيسية

التصيير الجزئي المسبق (PPR) في Next.js يُقدّم هيكلاً HTML ثابتاً من حافة CDN على الفور، ثم يبث أبناء Suspense الديناميكيين من الخادم الأصلي في نفس استجابة HTTP — مما يوفر سرعة CDN للمحتوى الثابت وبيانات محدّثة بالكامل للأقسام الديناميكية.

يحل PPR محل المفاضلة بين ISR والتصيير الديناميكي الكامل للصفحات التي تكون في معظمها ثابتة مع أقسام معزولة. تفعيله لا يتطلب تغييرات في كتابة Server Components أو Suspense — فقط إعداد في التهيئة وتصدير لكل مسار.

يكمل PPR وuse cache بعضهما: يستفيد الهيكل الثابت من تسليم CDN، بينما تُحفَّظ Server Components داخل حدود Suspense في الخادم الأصلي.

ما الذي يفعله التصيير الجزئي المسبق فعلاً؟

يقسّم PPR الصفحة إلى مرحلتَي تصيير في نفس استجابة HTTP. في وقت البناء، يُجمّد Next.js كل ما لا يقرأ بيانات الطلب الديناميكية في هيكل HTML ثابت يُنشر على حافة CDN. في وقت الطلب، تُسلّم CDN الهيكل بزمن استجابة حافة بينما يبث الخادم الأصلي محتوى كل حد Suspense في نفس الاستجابة.

كيف يختلف PPR عن ISR وuse cache والبث في Suspense؟

يوفر ISR سرعة CDN على حساب قِدَم الصفحة بأكملها. يُبقي التصيير الديناميكي الكامل البيانات محدّثة لكنه يُوجّه كل طلب للخادم. Streaming Suspense بدون PPR يبث من الخادم الأصلي فيشمل زمن أول بايت زمن الخادم. يجمع PPR بين تسليم CDN للهيكل الثابت وجِدّة البيانات لكل طلب لجزر Suspense.

كيف نُفعّل PPR في تطبيق Next.js؟

يتطلب PPR وجود Next.js 15 أو أحدث. قم بضبط experimental.ppr على 'incremental' في next.config.ts، ثم أضف export const experimental_ppr = true لكل مسار يستخدمه. كود Server Component وSuspense الحالي يستمر دون تغيير. يُنفّذ Next.js الحد تلقائياً: إذا قرأ مكوّن خارج Suspense بيانات ديناميكية يفشل البناء برسالة واضحة.

ما الذي ينتمي للهيكل الثابت مقابل داخل Suspense؟

الهيكل الثابت: شريط التنقل والعنوان والتذييل والمحتوى الثابت وبنية التخطيط والصور المستقلة عن جلسة المستخدم. داخل Suspense: المحتوى الخاص بالمستخدم كحالة عربة التسوق والتوصيات، والمخزون والأسعار المتغيرة، وتعيينات اختبار A/B، وأي مكوّن يقرأ cookies أو headers.

كيف يتكامل PPR وuse cache؟

يضع PPR حد CDN: الهيكل الثابت للحافة وأبناء Suspense الديناميكيون للخادم الأصلي. يتحكم use cache في تحديد التصيير المُحفَّظ. ابن Suspense المعلَّم بـ use cache يبث من الخادم لكنه يُقدَّم من ذاكرة التخزين المؤقت بعد أول تصيير. تتراكم كلتا التحسينتين دون تعارض.

متى نستخدم PPR بدلاً من التصيير الديناميكي الكامل؟

PPR أكثر قيمة للصفحات الثابتة في معظمها مع أقسام ديناميكية معزولة: صفحة منتج مع مخزون فوري، لوحة SaaS مع شريط جانبي مخزّن وبلاطات مقاييس مباشرة. إذا كانت الصفحة بأكملها تعتمد على بيانات لكل طلب، فالتصيير الديناميكي الكامل أبسط.

أسئلة شائعة

**س:** هل يتطلب PPR تغييرات في Server Components أو Suspense؟ **ج:** لا. فقط إعداد experimental.ppr في التهيئة وتصدير experimental_ppr لكل مسار. جميع الأنماط الحالية تعمل دون تغيير.

**س:** ماذا يحدث لتحسين محركات البحث مع PPR؟ **ج:** الهيكل الثابت HTML كامل قابل للزحف من CDN. المحتوى داخل Suspense قد يُفهرَس أو لا حسب قدرة الزاحف. احتفظ بالمحتوى المهم في الهيكل الثابت.

**س:** هل يمكن استخدام PPR وISR معاً على نفس المسار؟ **ج:** لا. يختار المسار إما PPR أو ISR. يحل PPR محل ISR لذلك المسار.

**س:** هل PPR مستقر في Next.js 15 و16؟ **ج:** يستخدم نموذج الاشتراك التدريجي ولا يزال تجريبياً في Next.js 16. آمن للإنتاج — تستخدمه Vercel داخلياً — لكن الواجهة قد تتغير قبل أن يصبح مستقراً.

**س:** كيف نتحقق من أن PPR يعمل على مسار ما؟ **ج:** نفّذ next build. يُظهر ناتج الطرفية المسارات ذات PPR كمسارات لها تقسيم بين أجزاء ثابتة وديناميكية. في شبكة Chrome DevTools تصل الاستجابة في أجزاء: الهيكل الثابت أولاً ثم بث Suspense.