مكوّنات الخادم

نقطة الدخول الجذرية حد للعميل

الاستيراد من @gunkin/uiify مريح ويحدّد حدًا للعميل. في Server Component، استورد من نقطة الدخول الخاصة بالمكوّن؛ فهي لا تحتوي على توجيه "use client".

// convenient: a client boundary
import { Accordion } from "@gunkin/uiify";

// server-compatible: no client JavaScript
import { Accordion } from "@gunkin/uiify/components/accordion";

النسخ المتحكّم بها تحت /client

يحتاج المكوّن المتحكّم به دائمًا إلى حد للعميل، إذ لا بد من جهة تحتفظ بالقيمة وتعيد العرض. لذا توجد النسخ المتحكّم بها تحت مسار فرعي /client، ولا تُفعّل بخاصية.

import { Modal } from "@gunkin/uiify/components/modal"; // uncontrolled, 0 kB
import { ModalClientContent } from "@gunkin/uiify/components/modal/client"; // controlled

تظهر كلفة الإماهة عندئذ في استيراد كتبته بنفسك، دون انتظار تقرير الحزمة لاحقًا. والمكوّن غير المتحكّم به هو الذي يعمل قبل الإماهة.

التركيب عبر الحد

يستطيع Client Component عرض Server Components تمرّر إليه عبر children، فيبقى الهيكل التفاعلي صغيرًا ويظل محتواه على الخادم.

// server component
<ClientShell>
  <ExpensiveServerRenderedThing />
</ClientShell>

تجنّب سياق React

يحظر Tier 0 سياق React: لا تستطيع Server Components استخدام السياق؛ لذا لا يمكن عرض أجزاء تتواصل عبر مزوّد على الخادم. تُوصّل الأجزاء بدلًا من ذلك بسمات HTML ومعرّفات حتمية.

اتبع القاعدة نفسها عند البناء على @gunkin/uiify/elements: يحلّ المتصفح commandfor وpopovertarget وfor وname دون JavaScript. انظر البنية

قبل الإماهة

تجتاز مكوّنات Tier 0 مجموعة اختبارات تعطيل JavaScript كاملة: يمكن تشغيلها، ولا تكتفي بالظهور. يحافظ Tier 1 على عمل الحالة الأصلية ويفقد فقط ما تضيفه جزيرته على العميل. ويعرض Tier 2 بنية HTML مفيدة؛ وينتظر التنقل بلوحة المفاتيح والترشيح ومزامنة ARIA اكتمال الإماهة.

تعرض صفحة كل مكوّن مستواه وميزانيته المقاسة؛ وتشرح أدلة التحقق كيفية تحديدهما.