Server Components

A entrada raiz é uma fronteira de cliente

Importar de @gunkin/uiify é conveniente e marca uma fronteira de cliente. Em um Server Component, importe pela entrada do próprio componente; ela não tem a diretiva "use client".

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

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

Variantes controladas em /client

Um componente controlado sempre precisa de uma fronteira de cliente, porque algo precisa guardar o valor e renderizar novamente. Por isso, as variantes controladas ficam no subcaminho /client, em vez de serem ativadas por uma prop.

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

Assim, o custo de hidratação aparece em uma importação escrita por você, em vez de surgir só no relatório do bundle. É o componente não controlado que funciona antes da hidratação.

Composição entre as fronteiras

Um Client Component pode renderizar Server Components passados como children. Isso mantém a estrutura interativa leve, enquanto o conteúdo permanece no servidor.

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

Evite o contexto do React

O Tier 0 proíbe o contexto do React: Server Components não podem usar contexto; portanto, partes que se comunicam por um provedor não podem ser renderizadas no servidor. As partes se conectam por atributos HTML e ids determinísticos.

Siga a mesma regra ao construir sobre @gunkin/uiify/elements: o navegador resolve commandfor, popovertarget, for e name sem JavaScript. Veja a arquitetura

Antes da hidratação

Os componentes Tier 0 passam integralmente na suíte sem JavaScript: podem ser operados, além de ficarem visíveis. O Tier 1 mantém o estado nativo funcionando e perde apenas o que a ilha acrescenta. O Tier 2 renderiza marcação útil; navegação por teclado, filtragem e sincronização de ARIA aguardam a hidratação.

Cada página de componente mostra seu tier e limite medido; Evidências explica como os dois são produzidos.