נקודת הכניסה הראשית היא גבול לקוח
ייבוא מ-@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, ולא מאחורי prop.
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 context
Tier 0 אוסר שימוש ב-React context: Server Components אינם יכולים להשתמש ב-context, ולכן חלקים שמתקשרים דרך provider אינם יכולים להתרנדר בשרת. במקומו, החלקים מחוברים באמצעות מאפייני HTML ומזהים דטרמיניסטיים.
פעלו לפי אותו כלל כשאתם בונים על @gunkin/uiify/elements: הדפדפן פותר את commandfor, את popovertarget, את for ואת name ללא JavaScript. על הארכיטקטורה
לפני הידרציה
רכיבי Tier 0 עוברים את סדרת הבדיקות ללא JavaScript במלואה: אפשר להפעיל אותם, ולא רק לראות אותם. Tier 1 שומר על פעולת המצב המובנה ומאבד רק את מה שאי הלקוח מוסיף. Tier 2 מציג מבנה HTML משמעותי; ניווט במקלדת, סינון וסנכרון ARIA ממתינים להידרציה.
כל עמוד רכיב מציג את הרמה ואת התקציב המדוד שלו; עדויות האימות מסבירות איך שניהם נקבעים.