الخادم أولًا

الأنواع الثلاثة

كل مكوّن ينتمي إلى نوع من ثلاثة أنواع، ويظهر نوعه على الشارة بجانب اسمه.

من بين 52 استيرادًا للمكوّنات اليوم: 19 للخادم، و13 مقسومة، و20 للعميل، مقروءة من ملف meta.ts لكل مكوّن.

ما الذي يمكن أن يعبر الحد

فقط ما يستطيع React تسلسله: النصوص والأرقام والقيم المنطقية والكائنات البسيطة والمصفوفات والعناصر الأبناء. لا تعبر الدالة الحد أبدًا، إلا إذا كانت إجراء خادم (Server Action).

// app/page.tsx - a Server Component
<Command items={commands} getKey={(c) => c.id} getLabel={(c) => c.label} onSelect={run} />
// getKey, getLabel and onSelect are functions: they cannot cross

'use client'
// the file that configures a palette is a client file
import { Command } from 'topclassui/command'

export function Search({ commands }: { commands: { id: string, label: string }[] }) {
  return (
    <Command
      items={commands}
      getKey={(command) => command.id}
      getLabel={(command) => command.label}
      onSelect={(command) => { window.location.assign(`/docs/${command.id}`) }}
    />
  )
}

لماذا لا يحتوي index.tsx على خطّافات

البنية في index.tsx، والسلوك في hook.ts. لا يحتوي index.tsx أبدًا على 'use client'، ولا يستورد hook.ts. ويفرض ذلك فحصٌ أثناء البناء.

// index.tsx - server
import { useId } from 'react'   // allowed
import { use } from 'react'     // allowed

// anything else fails check-boundaries:
// useState, useEffect, useRef, useMemo, useCallback

الخطّافان الوحيدان اللذان يُسمح لمكوّن الخادم باستدعائهما.

كيف يعمل المكوّن المقسوم

يعرض نصف الخادم البنية، ويتولّى كل ما يحتاج إلى الخادم، مثل أسماء الأيقونات. ويضيف نصف العميل السلوك الوحيد المطلوب.

// tag/index.tsx - server
export function Tag({ onRemove, children, ...rest }: TagProps) {
  if (onRemove) {
    return <Removable onRemove={onRemove} {...rest}>{children}</Removable> // the x is a client part
  }
  return <span {...rest}>{children}</span> // still server
}

كيف تُفحص الأحجام

لكل مكوّن ميزانية حجم. أما الفحص الذي يُفشل البناء عند تجاوز الميزانية فلم يُبنَ بعد.

ما الذي يكلّفك

يأتي مبدأ الخادم أولًا ببعض القيود، وهذه هي القيود التي ستلاحظها.