ما هي المعالجة المسبقة الجزئية (PPR)؟

Question

Accepted Answer

**المعالجة المسبقة الجزئية (Partial Prerendering - PPR)** هي نموذج معالجة في Next.js يجمع بين **المحتوى الثابت والديناميكي في صفحة واحدة** — حيث تقدم قشرة ثابتة فورية مع بث الأجزاء الديناميكية. وهي تمحو الحد الفاصل القديم بين SSG و SSR. ## المشكلة التي تحلها تقليديًا، كانت الصفحة *إما* ثابتة بالكامل (سريعة، لكن لا يمكنها أن تحتوي على محتوى خاص بكل مستخدم) *أو* ديناميكية بالكامل (يمكن تخصيصها، لكنها أبطأ وغير قابلة للتخزين المؤقت). الصفحات الحقيقية مختلطة: صفحة المنتج بها تصميم وصف ثابت لكن عدد سلة تسوق ديناميكي وتوصيات مخصصة. يسمح PPR بأن تكون **نفس الصفحة** كلاهما. ## كيف يعمل ```tsx import { Suspense } from "react"; export default function ProductPage() { return (

{/* STATIC — prerendered, served instantly from CDN */} {/* STATIC — same for everyone */} }> {/* DYNAMIC — streamed in per request */} }> {/* DYNAMIC — personalized, streamed */}

); } ``` الفكرة الأساسية: كل شيء **خارج** حد `` يتم **معالجته مسبقًا كقشرة ثابتة** في وقت البناء. أي شيء **داخل** Suspense (الذي يقرأ البيانات الديناميكية — cookies، headers، الجلب غير المخزن مؤقتًا) يُعامل كـ "فتحة" ديناميكية تبث في وقت الطلب. ## تسلسل التسليم ```text 1. Static shell (header, product info, skeletons) → served INSTANTLY from the edge/CDN 2. Dynamic holes (cart, recommendations) → stream in and replace the skeletons ``` يحصل المستخدم على رسم أول ذي معنى فورًا (قشرة ثابتة من CDN)، ثم تملأ الأجزاء المخصصة الثغرات — الأفضل من كليهما: السرعة الثابتة *والمحتوى* الديناميكي، بدون توجيه منفصل أو قرار نمط معالجة. ## الحالة ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## لماذا هذا مهم تزيل PPR الخيار الكاذب بين "سريع لكن ثابت" و"ديناميكي لكن بطيء." بمعالجة القشرة مسبقًا وبث الثغرات الديناميكية فقط (المحددة بـ Suspense)، تقدم صفحة واحدة أول رسم فوري من CDN مع محتوى مخصص — تلقائيًا، بدون تقسيم الصفحة أو اختيار SSG مقابل SSR يدويًا. إنها تمثل الاتجاه الذي تسير إليه المعالجة في Next.js: تكوين ثابت/ديناميكي دقيق لكل مكون.