Next.js: النموذج الذهني لمكونات الخادم (Server Components)

// app/dashboard/page.tsx — Server Component (Zero-Client JS)
import { getSalesData } from '@/lib/db'
import { formatDistanceToNow } from 'date-fns'

export default async function DashboardPage() {
  const sales = await getSalesData()  // الوصول المباشر إلى قاعدة البيانات
  return (
    <div>
      <h1>Dashboard — {sales.length} سجل</h1>
      <SalesTable data={sales} />
    </div>
  )
}

async function SalesTable({ data }: { data: Sale[] }) {
  return (
    <table>
      {data.map(row => (
        <tr key={row.id}>
          <td>{formatDistanceToNow(row.createdAt)}</td>
          <td>{row.amount}</td>
        </tr>
      ))}
    </table>
  )
}

الرسم التخطيطي: RSC Components؛ قاعدة البيانات/نظام الملفات/API؛ تسلسل إلى RSC Payload بروتوكول React Flight؛ RSC Payload؛ Client Component الحفاظ على منطق التفاعل؛ تصيير HTML خالص صفر تكلفة JS.

// app/bundle-demo/page.tsx — Server Component (خادم بحت)
import { format, addDays } from 'date-fns'

export default function BundleDemoPage() {
  const today = new Date()
  const dates = Array.from({ length: 7 }, (_, i) => {
    const d = addDays(today, i)
    return { label: format(d, 'EEEE'), date: format(d, 'yyyy-MM-dd') }
  })

  return (
    <div>
      <h1>هذا الأسبوع</h1>
      <ul>{dates.map(d => <li key={d.date}>{d.label}: {d.date}</li>)}</ul>
    </div>
  )
}

فحص ما بعد البناء .next/static/chunks — لا يتضمن كود date-fns

بعد البناء، لا يحتوي مجلد .next/static/chunks على كود date-fns — تم تأكيد صفر تكلفة JS من جانب العميل. الصفحة تُصيّر: عنوان "هذا الأسبوع" + 7 عناصر قائمة (مثل "الاثنين: 2026-07-06"، "الثلاثاء: 2026-07-07"، ...).

// ✅ صحيح: Server Component يستورد Client Component
// app/page.tsx (Server)
import ClientCounter from './ClientCounter'
export default function Page() {
  return <ClientCounter />
}

// app/ClientCounter.tsx (Client)
'use client'
import { useState } from 'react'
export default function ClientCounter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

// ❌ خطأ: Client Component لا يمكنه استيراد Server Component مباشرة
// app/ClientList.tsx
'use client'
import ServerItem from './ServerItem'  // ❌ خطأ ترجمة: Server Component لا يمكن استيراده من جانب العميل

export default function ClientList() {
  return <ServerItem />  // هذا السطر سيسبب خطأ.
}

// app/layout.tsx (Server)
import ClientShell from './ClientShell'
import ServerSidebar from './ServerSidebar'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <ClientShell sidebar={<ServerSidebar />}>
      {children}
    </ClientShell>
  )
}

يتضمن شريطًا جانبيًا.
النص المرئي: }>
      {children}

// app/interleaving/ClientWrapper.tsx
'use client'
import { useState } from 'react'

export default function ClientWrapper({ sidebar, children }: {
  sidebar: React.ReactNode
  children: React.ReactNode
}) {
  const [isOpen, setIsOpen] = useState(true)
  return (
    <div style={{ display: 'flex' }}>
      {isOpen && <aside>{sidebar}</aside>}
      <button onClick={() => setIsOpen(!isOpen)}>تبديل</button>
      <main>{children}</main>
    </div>
  )
}

مكون تفاعلي مع إدارة حالة.
النص المرئي: }

// app/interleaving/page.tsx (Server)
import ClientWrapper from './ClientWrapper'
import { getSidebarData } from '@/lib/db'

export default function InterleavingPage() {
  const items = getSidebarData() // استرجاع البيانات على جانب الخادم
  return (
    <ClientWrapper sidebar={<ServerItemList items={items} />}>
      <h1>المحتوى الرئيسي</h1>
    </ClientWrapper>
  )
}

async function ServerItemList({ items }: { items: string[] }) {
  return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>
}

يُصيّر قائمة من العناصر باستخدام .map().
النص المرئي: }> | المحتوى الرئيسي

// app/serializable/page.tsx (Server)
function greet() { return 'hello' }  // ❌ الدوال غير قابلة للتسلسل
const date = new Date()              // ⚠️ Date غير مسموح به كـ RSC Props

// app/serializable/ClientComponent.tsx
'use client'
export default function ClientComponent(props: {
  fn: () => string       // ❌ الدوال كـ props → خطأ وقت التشغيل
  date: Date             // ⚠️ Date → يتم تحويله إلى نص قد يفقد المنطقة الزمنية
  data: { name: string } // ✅ الكائنات العادية مسموحة
}) {
  return <div>{props.data.name}</div>
}

يُصيّر واجهة مكون ClientComponent.

# افتح لوحة Network، قم بتحديث الصفحة، فلتر Fetch/XHR
# ابحث عن طلب الصفحة الحالية، اعرض Response
# Content-Type: text/x-component أي RSC Payload

# مقتطف من RSC Payload (مبسط):
M1:{"id":"./app/page.tsx","chunks":["app/page-abc123.js"]}
J0:["$","div",null,{"children":["$","h1",null,{"children":"Dashboard"}]}]
S1:"react.suspense"

// app/flight-demo/ServerData.tsx — مكون بيانات خادم بحت
export default async function ServerData() {
  const data = await fetch('https://api.example.com/data').then(r => r.json())
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

// app/flight-demo/ClientShell.tsx
'use client'
export default function ClientShell({ dataSlot }: { dataSlot: React.ReactNode }) {
  return (
    <div className="card">
      <h2>غلاف العميل (Client Shell)</h2>
      <div className="server-data">{dataSlot}</div>
    </div>
  )
}

يُصيّر: غلاف العميل (Client Shell)
النص المرئي: Client Shell

// app/flight-demo/page.tsx
import ClientShell from './ClientShell'
import ServerData from './ServerData'

export default function FlightDemoPage() {
  return (
    <ClientShell dataSlot={<ServerData />}>
  )
}

// app/rsc-architecture/layout.tsx — RSC Layout
import ClientShell from './ClientShell'
import { getUser } from '@/lib/auth'

export default async function RscLayout({ children }: { children: React.ReactNode }) {
  const user = await getUser()                    // ✅ استعلام مباشر لقاعدة البيانات
  return (
    <ClientShell username={user?.name ?? 'زائر'}>
      <nav>
        <a href="/">الرئيسية</a>
        <a href="/dashboard">لوحة التحكم</a>
        <a href="/settings">الإعدادات</a>
      </nav>
      {children}
    </ClientShell>
  )
}

// app/rsc-architecture/ClientShell.tsx
'use client'
import { useState } from 'react'
import type { ReactNode } from 'react'

export default function ClientShell({ username, children }: {
  username: string
  children: ReactNode
}) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')
  return (
    <div data-theme={theme}>
      <header>
        <span>مرحبًا، {username}</span>
        <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
          تبديل {theme}
        </button>
      </header>
      {children}
    </div>
  )
}

// app/rsc-architecture/page.tsx
import { getProjects } from '@/lib/db'

export default async function RscArchitecturePage() {
  const projects = await getProjects()
  return (
    <div>
      <h1>المشاريع ({projects.length})</h1>
      <table>
        <thead><tr><th>الاسم</th><th>الحالة</th></tr></thead>
        <tbody>
          {projects.map(p => (
            <tr key={p.id}>
              <td>{p.name}</td>
              <td><StatusBadge status={p.status} /></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

function StatusBadge({ status }: { status: string }) {
  const colors: Record<string, string> = {
    active: '#4caf50', archived: '#9e9e9e', draft: '#ff9800'
  }
  return <span style={{ background: colors[status] ?? '#ccc', padding: '2px 8px', borderRadius: 4 }}>{status}</span>
}