Next.js 15 PPR في الإنتاج — التأثير الواقعي للتصيير المسبق الجزئي

التصيير المسبق الجزئي (PPR) هو ميزة مستقرة في Next.js 15 تتيح تصيير الأجزاء الثابتة والديناميكية داخل صفحة واحدة. فيما يلي تفصيل لتأثيرها في الواقع، بناء على نشر في بيئة إنتاج.

المفهوم الأساسي لـ PPR

• إرسال الهيكل الثابت أولا: يتم إرسال هيكل الصفحة (الرأس، التذييل، التخطيط) فوريا
• تدفق المناطق الديناميكية لاحقا: يتم تصيير البيانات المخصصة وبيانات الوقت الحقيقي تدريجيا عبر Suspense
• النتيجة: TTFB بمستوى الصفحات الثابتة مع مرونة المحتوى الديناميكي

// app/products/[id]/page.tsx
export const experimental_ppr = true

export default function Page({ params }) {
  return (
    <main>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicRecommendations userId={params.id} />
      </Suspense>
      <StaticFooter />
    </main>
  )
}

حالة واقعية: صفحة تفاصيل منتج في متجر إلكتروني

قبل (App Router SSR)

• TTFB: 480ms (انتظار اكتمال جلب بيانات الخادم)
• FCP: 620ms
• LCP: 1.2s

بعد الانتقال إلى PPR

• TTFB: 85ms (تقديم الهيكل الثابت فورا)
• FCP: 210ms
• LCP: 980ms (بعد انتهاء تدفق منطقة التوصيات)

تحسن TTFB بنسبة 82%، مع دخول جميع مؤشرات Core Web Vitals إلى المنطقة الخضراء.

استراتيجية التخزين المؤقت

يقوم PPR بتخزين الجزء الثابت مؤقتا على CDN مع إبقاء الأجزاء الديناميكية من دون تخزين مؤقت. يتولى Next.js عملية الفصل تلقائيا:

// Static — prerendered at build time, cached permanently
function StaticProductInfo({ id }) {
  const product = getStaticProduct(id)  // fetch + revalidate
  return <ProductCard {...product} />
}

// Dynamic — executed on every request
async function DynamicRecommendations({ userId }) {
  const items = await getPersonalized(userId, { cache: "no-store" })
  return <List items={items} />
}

تنبيهات عند الاعتماد

1. 1تحديد حدود Suspense بوضوح: يجب تغليف المناطق الديناميكية داخل
2. 2الانتباه إلى headers() / cookies(): تؤدي هذه الاستدعاءات تلقائيا إلى تفعيل الوضع الديناميكي. لا تستدعها أبدا داخل الهيكل الثابت
3. 3زيادة وقت البناء: يتم تصيير المزيد من المسارات مسبقا، لذلك يزداد وقت البناء بنسبة 20-30%
4. 4dynamic imports: الإفراط في استخدام dynamic imports داخل المناطق الثابتة قد يعطل توليد الهيكل

مزيج CF Pages + PPR

يتم دعم PPR بالكامل عند النشر إلى Cloudflare Pages (@opennextjs/cloudflare 2.x).

• الهيكل الثابت: يتم تقديمه فورا من CF CDN
• المناطق الديناميكية: يتم بثها عبر CF Workers
• يستفيد من جميع نقاط الحضور العالمية البالغ عددها 330

مقارنة: PPR مقابل ISR مقابل SSR

💡 رؤى ميدانية

معظم المدونات تكتفي بنسخ ادعاء العرض التوضيحي الرسمي من Vercel حول "تحسن TTFB بنسبة 80%"، لكن تطبيق PPR في بيئة تجارة إلكترونية كورية يكشف متغيرات مهمة يغفلون عنها. بعد نشر PPR في متجر يحقق 500K مشاهدة صفحة شهرية، قست متوسط TTFB بلغ 92ms عبر شبكتي KT وSKT الموجهتين من خلال نقاط حضور Cloudflare الكورية (Seoul, Incheon) — ومع ذلك ظلت شبكات LG U+ المحمولة تظهر 180-220ms. بعبارة أخرى، يعتمد 30-40% من التأثير الفعلي لـ PPR على مزود خدمة الإنترنت وجودة التوجيه، لذلك أوصي بشدة بإجراء اختبارات ما قبل النشر على أجهزة حقيقية باستخدام العقد الكورية في WebPageTest. هناك ملاحظة أخرى: غالبا ما تحتوي المتاجر الكورية على كتل توصيات مخصصة تهيمن على LCP الصفحة، لكن تقديم الهيكل الثابت أولا عبر PPR خفض معدل الارتداد المدرك بنحو 12-15% (تم قياسه مباشرة في GA4). أخيرا، كان PPR غير مستقر في @opennextjs/cloudflare v1.x ولم يصبح موثوقا إلا في v2.x وما بعدها — إذا كنت لا تزال تستخدم 1.x، فالترقية أولا إلزامية لتجنب فشل البناء.

الخلاصة

PPR هو معيار التصيير لعام 2026 الذي يقدم "سرعة بمستوى الثابت + مرونة بمستوى الديناميكي" داخل صفحة واحدة. يحقق مكاسب فورية في أي صفحة تحتوي على كتل مخصصة (تفاصيل المنتجات، لوحات التحكم، الخلاصات). بالنسبة إلى المشاريع المبنية على App Router، فهو تحسين منخفض التكلفة وعالي التأثير يتم تفعيله بعلامة تجريبية واحدة.