Корневая точка входа создаёт клиентскую границу
Импорт из @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 формирует содержательную разметку; навигация с клавиатуры, фильтрация и синхронизация ARIA ждут гидратации.
На странице каждого компонента указаны его Tier и измеренный лимит; раздел с проверками объясняет, как они получены.