Next.js: استراتيجيات التصيير: SSR و SSG و ISR

// app/products/[id]/page.tsx — التجديد الثابت المتزايد ISR
export async function generateStaticParams() {
  const products = await db.product.findMany({ select: { id: true } })
  return products.map(p => ({ id: String(p.id) }))
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await db.product.findUnique({ where: { id: Number(params.id) } })
  return <ProductView product={product} />
}

// تكوين مقطع المسار
export const revalidate = 300  // إعادة التحقق كل 5 دقائق

// app/dashboard/page.tsx
export const dynamic = 'force-dynamic'

export default async function DashboardPage() {
  const user = await getCurrentUser()  // الحصول على أحدث البيانات مع كل طلب
  return <DashboardView user={user} />
}

// app/about/page.tsx
export const dynamic = 'force-static'

export default async function AboutPage() {
  const version = await getVersion()  // الحساب مرة واحدة أثناء وقت البناء
  return <div>Version: {version}</div>
}

يعرض واجهة مستخدم مكون AboutPage.

// app/streaming-demo/page.tsx
import { Suspense } from 'react'

export default function StreamingDemoPage() {
  return (
    <div>
      <h1>Streaming SSR Demo</h1>
      <p>يظهر هذا النص فورًا (هيكل ثابت).</p>
      <Suspense fallback={<div>جارٍ تحميل البيانات البطيئة...</div>}>
        <SlowComponent delay={3000} />
      </Suspense>
      <Suspense fallback={<div>جارٍ تحميل البيانات السريعة...</div>}>
        <SlowComponent delay={1000} />
      </Suspense>
    </div>
  )
}

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

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

// app/docs/page.tsx — يتم التوليد أثناء البناء
export default async function DocsPage() {
  const docs = await fetch('https://cms.example.com/docs', {
    cache: 'force-cache'  // الاسترجاع أثناء البناء، تخزين مؤقت دائم
  }).then(r => r.json())
  return <ArticleView content={docs} />
}

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://cms.example.com/posts').then(r => r.json())
  return posts.map((post: any) => ({ slug: post.slug }))  // → /blog/hello-world, /blog/nextjs-guide ...
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://cms.example.com/posts/${params.slug}`).then(r => r.json())
  return <article><h1>{post.title}</h1><div>{post.content}</div></article>
}

يجلب البيانات ويعرض قائمة بالعناصر.

// app/products/[id]/page.tsx
type Product = { id: number; title: string; price: number }

export async function generateStaticParams() {
  const products: Product[] = await fetch('https://fakestoreapi.com/products').then(r => r.json())
  return products.slice(0, 5).map(p => ({ id: String(p.id) }))
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product: Product = await fetch(`https://fakestoreapi.com/products/${params.id}`).then(r => r.json())
  return (
    <div>
      <h1>{product.title}</h1>
      <p>السعر: ${product.price}</p>
    </div>
  )
}

سجل البناء:
✓ Generating static pages (5/5)  /products/1  /products/2  /products/3  /products/4  /products/5

يعرض المتصفح كل صفحة منتج:
  /products/1 → عنوان المنتج + "السعر: $109.95"
  /products/2 → عنوان المنتج + "السعر: $22.30"
  /products/3 → عنوان المنتج + "السعر: $55.99"
  /products/4 → عنوان المنتج + "السعر: $15.99"
  /products/5 → عنوان المنتج + "السعر: $695.00"

// app/posts/[id]/page.tsx
export const revalidate = 3600  // إعادة التحقق مرة كل ساعة

export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await fetch(`https://cms.example.com/posts/${params.id}`, {
    next: { revalidate: 3600 }  // متوافق أيضًا على مستوى fetch
  }).then(r => r.json())
  return <PostView post={post} />
}

// app/admin/actions.ts
'use server'
import { revalidatePath, revalidateTag } from 'next/cache'

export async function updatePost(formData: FormData) {
  const id = formData.get('id') as string
  await db.post.update({ where: { id: Number(id) }, data: { title: formData.get('title') as string } })

  revalidatePath(`/posts/${id}`)     // تحديث مقال واحد
  revalidatePath('/posts')           // تحديث صفحة القائمة
  revalidateTag('posts')             // تحديث كل ما يحمل وسم posts في الذاكرة المؤقتة
}

يعرض واجهة مستخدم مكون updatePost.

// app/isr-demo/page.tsx
export const revalidate = 30  // إعادة التحقق الفوري كل 30 ثانية

export default async function IsrDemoPage() {
  const time = await fetch('http://worldtimeapi.org/api/timezone/Asia/Shanghai', {
    next: { tags: ['time'] }
  }).then(r => r.json())

  return (
    <div>
      <h1>ISR Demo — إعادة التحقق كل 30 ثانية</h1>
      <p>الوقت الحالي: {time.datetime}</p>
      <p>تم التوليد في: {new Date().toISOString()}</p>
    </div>
  )
}

يجلب البيانات ويعرض النتيجة.
النص المرئي: ISR Demo — إعادة التحقق كل 30 ثانية | الوقت الحالي: {time.datetime}

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

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const secret = request.headers.get('x-revalidate-secret')
  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 })
  }

  const body = await request.json()
  if (body.type === 'path') {
    revalidatePath(body.path)
  } else if (body.type === 'tag') {
    revalidateTag(body.tag)
  }

  return NextResponse.json({ revalidated: true })
}

# من استدعاء Webhook لنظام CMS
curl -X POST https://example.com/api/revalidate \
  -H "x-revalidate-secret: your-secret" \
  -H "Content-Type: application/json" \
  -d '{"type": "tag", "tag": "posts"}'

{"status":"ok","data":{}}

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

// app/static-page/page.tsx — فرض الثبات
export const dynamic = 'force-static'

export default async function StaticPage() {
  const time = new Date().toISOString()
  return (
    <div>
      <h1>Static Page (تم بناؤها وقت البناء)</h1>
      <p>هذا الطابع الزمني ثابت: {time}</p>
      <p>قم بتحديث الصفحة — الوقت لا يتغير أبدًا.</p>
    </div>
  )
}

يعرض: Static Page (تم بناؤها وقت البناء)
النص المرئي: Static Page (تم بناؤها وقت البناء) | هذا الطابع الزمني ثابت: {time} | قم بتحديث الصفحة — الوقت لا يتغير أبدًا.

// app/dynamic-page/page.tsx — تحديثات إلزامية
export const dynamic = 'force-dynamic'

export default async function DynamicPage() {
  const time = new Date().toISOString()
  return (
    <div>
      <h1>Dynamic Page (يتم تصييرها مع كل طلب)</h1>
      <p>هذا الطابع الزمني يتغير مع كل تحديث: {time}</p>
    </div>
  )
}

الصفحة الثابتة:  الطابع الزمني دائمًا "2026-07-06T10:00:00.000Z"  ← لا يتغير
الصفحة الديناميكية: الطابع الزمني يتغير مع كل تحديث               ← يختلف في كل مرة

// app/blog/layout.tsx
export default function BlogLayout({ children }: { children: React.ReactNode }) {
  return <div style={{ maxWidth: 800, margin: '0 auto', padding: 24 }}>{children}</div>
}

// app/blog/page.tsx — قائمة المدونة (SSG + ISR)
export const revalidate = 300  // ISR كل 5 دقائق

export default async function BlogListPage() {
  const posts = await fetch('https://jsonplaceholder.typicode.com/posts', {
    next: { tags: ['blog-posts'] }
  }).then(r => r.json())

  return (
    <div>
      <h1>المدونة</h1>
      <ul>{posts.slice(0, 10).map((p: any) => (
        <li key={p.id}><a href={`/blog/${p.id}`}>{p.title}</a></li>
      ))}</ul>
      <p>آخر توليد: {new Date().toISOString()}</p>
    </div>
  )
}

// app/blog/[id]/page.tsx — تفاصيل المقال (SSG + ISR)
export async function generateStaticParams() {
  const posts = await fetch('https://jsonplaceholder.typicode.com/posts').then(r => r.json())
  return posts.slice(0, 10).map((p: any) => ({ id: String(p.id) }))
}

export default async function BlogPostPage({ params }: { params: { id: string } }) {
  const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`, {
    next: { tags: [`post-${params.id}`] }
  }).then(r => r.json())

  const comments = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}/comments`, {
    cache: 'no-store'
  }).then(r => r.json())

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <h2>التعليقات ({comments.length})</h2>
      <ul>{comments.map((c: any) => (
        <li key={c.id}><strong>{c.name}:</strong> {c.body}</li>
      ))}</ul>
    </article>
  )
}

// app/blog/actions.ts — التحديث حسب الطلب
'use server'
import { revalidateTag } from 'next/cache'

export async function refreshBlog() {
  revalidateTag('blog-posts')
}

// app/blog/[id]/admin/page.tsx — لوحة الإدارة (SSR)
export const dynamic = 'force-dynamic'

export default async function AdminPage({ params }: { params: { id: string } }) {
  const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`).then(r => r.json())
  return (
    <form action={async (fd) => {
      'use server'
      await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`, { method: 'PATCH', body: JSON.stringify({ title: fd.get('title') }) })
      revalidateTag(`post-${params.id}`)
    }}>
      <input name="title" defaultValue={post.title} />
      <button type="submit">تحديث</button>
    </form>
  )
}