Next.js: التصيير المسبق الجزئي (PPR)

// app/dashboard/page.tsx
import { Suspense } from 'react'
import { NavBar } from '@/components/NavBar'
import { UserGreeting } from '@/components/UserGreeting'
import { NotificationList } from '@/components/NotificationList'
import { Skeleton } from '@/components/Skeleton'

export default function DashboardPage() {
  return (
    <div>
      <NavBar />                           {/* الهيكل الثابت: يتم التوليد أثناء البناء */}
      <Suspense fallback={<Skeleton />}>  {/* الحد الديناميكي */}
        <UserGreeting />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <NotificationList />
      </Suspense>
    </div>
  )
}

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    ppr: true  // تفعيل PPR
  }
}

export default nextConfig

# تشغيل خادم التطوير بعد التثبيت
npm run dev

يعرض مكون React واجهة المستخدم الموصوفة في المتصفح.

// app/ppr-compare/page.tsx — بعد تفعيل PPR يسري تلقائيًا
import { Suspense } from 'react'

// قسم الهيكل الثابت (يتم التوليد أثناء البناء)
export default function PprComparePage() {
  return (
    <div>
      <header style={{ background: '#f0f0f0', padding: 16 }}>
        <h1>PPR Demo</h1>
        <nav><a href="/">الرئيسية</a> | <a href="/about">حول</a></nav>
      </header>

      {/* الحد الديناميكي: يتم الاسترجاع من جديد مع كل طلب */}
      <Suspense fallback={<div style={{ padding: 16 }}>جارٍ تحميل المستخدم...</div>}>
        <RealtimeUser />
      </Suspense>

      {/* الحد الثابت: يتم التصيير أثناء البناء */}
      <footer style={{ borderTop: '1px solid #ddd', padding: 16 }}>
        <p>تم البناء في: {new Date().toISOString()}</p>
      </footer>
    </div>
  )
}

async function RealtimeUser() {
  const user = await fetch('https://api.example.com/me', { cache: 'no-store' })
    .then(r => r.json())
  return <div style={{ padding: 16 }}>مرحبًا، {user.name}</div>
}

يعرض: لوحة تحكم بهيكل جانبي ثابت + ملف مستخدم ديناميكي وإحصائيات مشروع داخل حدود Suspense.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return (
    <div>
      {/* ✅ ثابت: الشريط الجانبي موجود دائمًا، لا يتطلب تحديثات فورية */}
      <Sidebar />

      {/* ✅ ديناميكي: يحتاج إلى استرجاع فوري */}
      <Suspense fallback={<LoadingSpinner />}>
        <RealtimeData />
      </Suspense>

      {/* ❌ Suspense غير ضروري: هذا المكون لا يحتوي على بيانات ديناميكية. */}
      <Suspense fallback={<LoadingSpinner />}>
        <StaticAboutSection />  {/* لا يحتاج إلى تغليف */}
      </Suspense>
    </div>
  )
}

يعرض هيكلًا ثابتًا فورًا، مع تحميل المحتوى الديناميكي داخل حدود Suspense.
الاحتياطي: }>
النص المرئي: }> | }>

// app/ppr-timing/page.tsx
import { Suspense } from 'react'

export default function PprTimingPage() {
  return (
    <div>
      <h1>PPR Timing Demo</h1>
      {/* الهيكل الثابت: يظهر فورًا */}
      <p>يظهر هذا فورًا (هيكل ثابت)</p>

      {/* الحد الديناميكي 1: يظهر بعد ثانيتين */}
      <Suspense fallback={<div>⏳ جارٍ تحميل القسم 1...</div>}>
        <DelayedSection label="القسم 1" delay={2000} />
      </Suspense>

      {/* الحد الديناميكي 2: يظهر بعد 4 ثوانٍ، مستقل عن الحد 1 */}
      <Suspense fallback={<div>⏳ جارٍ تحميل القسم 2...</div>}>
        <DelayedSection label="القسم 2" delay={4000} />
      </Suspense>
    </div>
  )
}

async function DelayedSection({ label, delay }: { label: string; delay: number }) {
  await new Promise(resolve => setTimeout(resolve, delay))
  return <div>✅ {label} تم التحميل بعد {delay} مللي ثانية</div>
}

يعرض هيكلًا ثابتًا فورًا، مع تحميل المحتوى الديناميكي داخل حدود Suspense.
الاحتياطي: ⏳ جارٍ تحميل القسم 1...
النص المرئي: PPR Timing Demo | يظهر هذا فورًا (هيكل ثابت) | ⏳ جارٍ تحميل القسم 1... | }>

مخطط استراتيجية التصيير: هيكل ثابت + حدود Suspense ديناميكية.

// app/dashboard-ppr/page.tsx — تصميم PPR عملي
import { Suspense } from 'react'

// ======== مجموعة الهيكل الثابت ========
function DashboardHeader() {
  return (
    <header style={{ background: '#1a1a2e', color: 'white', padding: '16px 24px' }}>
      <h1 style={{ margin: 0 }}>TaskFlow Dashboard</h1>
    </header>
  )
}

function Sidebar() {
  return (
    <nav style={{ width: 240, background: '#f5f5f5', padding: 16, minHeight: 'calc(100vh - 64px)' }}>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        <li><a href="/">🏠 الرئيسية</a></li>
        <li><a href="/projects">📁 المشاريع</a></li>
        <li><a href="/tasks">✅ المهام</a></li>
        <li><a href="/analytics">📊 التحليلات</a></li>
        <li><a href="/settings">⚙️ الإعدادات</a></li>
      </ul>
    </nav>
  )
}

// ======== مكونات الحد الديناميكي ========
async function UserProfile() {
  const user = await fetch('https://api.example.com/me', { cache: 'no-store' }).then(r => r.json())
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <img src={user.avatar} alt="" style={{ borderRadius: '50%', width: 40, height: 40 }} />
      <div>
        <strong>{user.name}</strong>
        <p style={{ margin: 0, fontSize: 12, color: '#666' }}>{user.role}</p>
      </div>
    </div>
  )
}

async function ProjectStats() {
  const stats = await fetch('https://api.example.com/stats', { next: { revalidate: 60 } }).then(r => r.json())
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      <StatCard label="المشاريع النشطة" value={stats.activeProjects} color="#4caf50" />
      <StatCard label="المهام المعلقة" value={stats.pendingTasks} color="#ff9800" />
      <StatCard label="المكتملة" value={stats.completed} color="#2196f3" />
    </div>
  )
}

function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
  return (
    <div style={{ border: `1px solid ${color}`, borderRadius: 8, padding: 16, textAlign: 'center' }}>
      <p style={{ fontSize: 28, fontWeight: 'bold', color, margin: 0 }}>{value}</p>
      <p style={{ margin: 0, color: '#666', fontSize: 14 }}>{label}</p>
    </div>
  )
}

export default function DashboardPprPage() {
  return (
    <div style={{ display: 'flex' }}>
      <Sidebar />
      <main style={{ flex: 1, padding: 24 }}>
        <DashboardHeader />
        <Suspense fallback={<div>جارٍ تحميل الملف الشخصي...</div>}>
          <UserProfile />
        </Suspense>
        <div style={{ height: 24 }} />
        <Suspense fallback={<div>جارٍ تحميل الإحصائيات...</div>}>
          <ProjectStats />
        </Suspense>
      </main>
    </div>
  )
}

يجلب البيانات من جانب الخادم ويعرض النتيجة في الصفحة.
المحتوى المرئي: TaskFlow Dashboard

// app/ppr-ecommerce/page.tsx — لوحة تحكم التجارة الإلكترونية PPR
import { Suspense } from 'react'
import { cookies } from 'next/headers'

// ======== الهيكل الثابت ========
function StoreHeader() {
  return (
    <header style={{ background: '#2c3e50', color: 'white', padding: '12px 24px', display: 'flex', justifyContent: 'space-between' }}>
      <strong>Store Dashboard</strong>
      <span>تم البناء: {new Date().toISOString().split('T')[0]}</span>
    </header>
  )
}

function Navigation() {
  return (
    <nav style={{ background: '#34495e', padding: '8px 24px', display: 'flex', gap: 24, color: 'white' }}>
      <a href="/ppr-ecommerce" style={{ color: 'white' }}>نظرة عامة</a>
      <a href="/ppr-ecommerce/orders" style={{ color: 'white' }}>الطلبات</a>
      <a href="/ppr-ecommerce/products" style={{ color: 'white' }}>المنتجات</a>
    </nav>
  )
}

// ======== المكونات الديناميكية ========
async function LiveOrderFeed() {
  const orders = await fetch('https://api.example.com/orders/recent', {
    cache: 'no-store'
  }).then(r => r.json())

  return (
    <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16 }}>
      <h2>الطلبات المباشرة ({orders.length})</h2>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead><tr><th>الطلب</th><th>العميل</th><th>الحالة</th><th>الإجمالي</th></tr></thead>
        <tbody>
          {orders.map((o: any) => (
            <tr key={o.id}>
              <td>#{o.id}</td>
              <td>{o.customer}</td>
              <td><StatusBadge status={o.status} /></td>
              <td>${o.total}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

function StatusBadge({ status }: { status: string }) {
  const colors: Record<string, string> = {
    pending: '#ff9800', shipped: '#2196f3', delivered: '#4caf50', cancelled: '#f44336'
  }
  return <span style={{ background: colors[status] ?? '#ccc', color: 'white', padding: '2px 8px', borderRadius: 12, fontSize: 12 }}>{status}</span>
}

async function RevenueWidget() {
  const revenue = await fetch('https://api.example.com/revenue/today', {
    next: { revalidate: 300 }
  }).then(r => r.json())

  return (
    <div style={{ background: 'linear-gradient(135deg, #667eea, #764ba2)', color: 'white', borderRadius: 8, padding: 24 }}>
      <h2 style={{ margin: 0, fontSize: 14, opacity: 0.8 }}>إيرادات اليوم</h2>
      <p style={{ fontSize: 36, fontWeight: 'bold', margin: '8px 0' }}>${revenue.total}</p>
      <p style={{ margin: 0, fontSize: 12, opacity: 0.8 }}>↑ {revenue.growth}% مقارنة بالأمس</p>
    </div>
  )
}

async function TopProducts() {
  const products = await fetch('https://api.example.com/products/top', {
    next: { tags: ['top-products'] }
  }).then(r => r.json())

  return (
    <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16 }}>
      <h2>أفضل المنتجات</h2>
      <ol>{products.slice(0, 5).map((p: any) => (
        <li key={p.id}>{p.name} — {p.sold} مباع</li>
      ))}</ol>
    </div>
  )
}

// ======== الصفحة (PPR مختلط) ========
export default function PprEcommercePage() {
  return (
    <div>
      <StoreHeader />
      <Navigation />
      <main style={{ padding: 24, display: 'grid', gap: 24, gridTemplateColumns: '2fr 1fr' }}>
        <div>
          <Suspense fallback={<div>جارٍ تحميل الطلبات...</div>}>
            <LiveOrderFeed />
          </Suspense>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <Suspense fallback={<div>جارٍ تحميل الإيرادات...</div>}>
            <RevenueWidget />
          </Suspense>
          <Suspense fallback={<div>جارٍ تحميل المنتجات...</div>}>
            <TopProducts />
          </Suspense>
        </div>
      </main>
    </div>
  )
}

# عرض مخرجات الهيكل الثابت بعد البناء
npm run build

# في .next/server/app/ppr-ecommerce، انتقل للأسفل للعرض
ls .next/server/app/ppr-ecommerce/

page.html          ← HTML الهيكل الثابت (شريط التنقل، التخطيط)
page.rsc           ← حمولة RSC (القسم الثابت)
page_stream.html   ← نقطة الحقن الجزئي المتدفق

يتم تصيير الصفحة كما هو موصوف أعلاه، مع تحديث واجهة المستخدم بناءً على السلوك الموصوف.

// app/ppr-verify/page.tsx
import { Suspense } from 'react'

function StaticHeader() {
  return (
    <header style={{ borderBottom: '2px solid #333', padding: 16, marginBottom: 16 }}>
      <h1>PPR Verification Page</h1>
      <p>الطابع الزمني للبناء: {new Date().toISOString()}</p>
      <nav><a href="/">الرئيسية</a> | <a href="/ppr-verify">تحديث</a></nav>
    </header>
  )
}

async function DynamicContent() {
  const res = await fetch('http://worldtimeapi.org/api/timezone/Etc/UTC', {
    cache: 'no-store'
  }).then(r => r.json())

  return (
    <div style={{ background: '#e3f2fd', padding: 16, borderRadius: 8 }}>
      <h2>وقت الخادم المباشر</h2>
      <p style={{ fontSize: 24 }}>{res.datetime}</p>
    </div>
  )
}

export default function PprVerifyPage() {
  return (
    <div>
      <StaticHeader />
      <Suspense fallback={<div style={{ padding: 16 }}>⏳ جارٍ تحميل الوقت المباشر...</div>}>
        <DynamicContent />
      </Suspense>
      <footer style={{ marginTop: 32, color: '#666' }}>
        <p>الرأس هو هيكل ثابت (مخزن مؤقتًا). المحتوى الديناميكي يتحدث مع كل طلب.</p>
      </footer>
    </div>
  )
}

يجلب البيانات من جانب الخادم ويعرض النتيجة في الصفحة.
المحتوى المرئي: PPR Verification Page