Renderizado en servidor

Usa SSR y React Server Components sin diferencias de hidratación.

Mantén la carga de datos, la estructura del documento y la distribución no interactiva en el servidor. Coloca la directiva de cliente en el módulo más pequeño que gestione interacciones.

Código
// app/account/save-button.tsx
"use client"

import { Button } from "@liquidify/react"

export function SaveButton({ accountId }: { accountId: string }) {
  return <Button onPress={() => console.log(accountId)}>Guardar</Button>
}

Código
// app/account/page.tsx
import { SaveButton } from "./save-button"

export default async function AccountPage() {
  const account = await loadAccount()
  return (
    <main>
      <h1>{account.name}</h1>
      <SaveButton accountId={account.id} />
    </main>
  )
}

Importa @liquidify/react/styles.css en el layout raíz o la entrada global de estilos.

Reglas de hidratación

Pasa solo valores serializables del servidor al cliente.
Usa los mismos valores controlados iniciales en ambos entornos.
Lee almacenamiento, preferencias del navegador, window y document en efectos o eventos.
Inicia las superposiciones cerradas salvo que open sea determinista.

Las superposiciones usan portales solo cuando están abiertas. Los identificadores internos usan el mecanismo de React compatible con el servidor; no los sustituyas por valores aleatorios durante el renderizado.

Consulta Primeros pasos y SSR y RSC.

Renderizado en servidor

Usa SSR y React Server Components sin diferencias de hidratación.

Mantén la carga de datos, la estructura del documento y la distribución no interactiva en el servidor. Coloca la directiva de cliente en el módulo más pequeño que gestione interacciones.

Código
// app/account/save-button.tsx
"use client"

import { Button } from "@liquidify/react"

export function SaveButton({ accountId }: { accountId: string }) {
  return <Button onPress={() => console.log(accountId)}>Guardar</Button>
}

Código
// app/account/page.tsx
import { SaveButton } from "./save-button"

export default async function AccountPage() {
  const account = await loadAccount()
  return (
    <main>
      <h1>{account.name}</h1>
      <SaveButton accountId={account.id} />
    </main>
  )
}

Importa @liquidify/react/styles.css en el layout raíz o la entrada global de estilos.

Reglas de hidratación

Pasa solo valores serializables del servidor al cliente.
Usa los mismos valores controlados iniciales en ambos entornos.
Lee almacenamiento, preferencias del navegador, window y document en efectos o eventos.
Inicia las superposiciones cerradas salvo que open sea determinista.

Consulta Primeros pasos y SSR y RSC.