Server Components

La entrada raíz es un límite de cliente

Importar desde @gunkin/uiify es práctico y establece un límite de cliente. En un Server Component, importa desde la entrada específica del componente; no tiene la directiva "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 en /client

Un componente controlado siempre necesita un límite de cliente, porque algo debe guardar el valor y volver a renderizar. Por eso las variantes controladas se encuentran en una subruta /client y no se activan mediante una prop.

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

Así, el costo de hidratación queda explícito en la importación que escribes, sin esperar a un informe del bundle. El componente no controlado es el que funciona antes de la hidratación.

Composición entre ambos lados del límite

Un Client Component puede renderizar Server Components recibidos como children. Esto mantiene una envoltura interactiva mínima mientras su contenido permanece en el servidor.

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

Evita el contexto de React

Tier 0 prohíbe el contexto de React: los Server Components no pueden usarlo, por lo que las partes que se comunican mediante un proveedor no pueden renderizarse en el servidor. En su lugar, se conectan con atributos HTML e ids deterministas.

Sigue la misma regla al crear sobre @gunkin/uiify/elements: el navegador resuelve commandfor, popovertarget, for y name sin JavaScript. Consulta Arquitectura

Antes de la hidratación

Los componentes Tier 0 superan todas las pruebas sin JavaScript: se pueden usar, además de verse. Tier 1 mantiene el estado nativo en funcionamiento y solo pierde lo que añade su isla de cliente. Tier 2 renderiza marcado útil; la navegación con teclado, el filtrado y la sincronización de ARIA esperan a la hidratación.

Cada página de componente muestra su nivel y su límite medido; Verificación explica cómo se obtienen ambos.