Rendu serveur

Utilisez SSR et React Server Components sans différences d’hydratation.

Gardez le chargement des données, la structure du document et la mise en page non interactive sur le serveur. Placez la directive client dans le plus petit module qui gère les interactions.

Code
// app/account/save-button.tsx
"use client"

import { Button } from "@liquidify/react"

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

Code
// 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>
  )
}

Importez @liquidify/react/styles.css dans le layout racine ou l’entrée globale des styles.

Règles d’hydratation

Transmettez uniquement des valeurs sérialisables du serveur au client.
Utilisez les mêmes valeurs contrôlées initiales dans les deux environnements.
Lisez le stockage, les préférences du navigateur, window et document dans des effets ou événements.
Initialisez les superpositions fermées, sauf si open est déterministe.

Les superpositions utilisent des portails uniquement lorsqu’elles sont ouvertes. Les identifiants internes utilisent le mécanisme React compatible avec le serveur ; ne les remplacez pas par des valeurs aléatoires pendant le rendu.

Consultez Premiers pas et SSR et RSC.

Rendu serveur

Utilisez SSR et React Server Components sans différences d’hydratation.

Gardez le chargement des données, la structure du document et la mise en page non interactive sur le serveur. Placez la directive client dans le plus petit module qui gère les interactions.

Code
// app/account/save-button.tsx
"use client"

import { Button } from "@liquidify/react"

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

Code
// 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>
  )
}

Importez @liquidify/react/styles.css dans le layout racine ou l’entrée globale des styles.

Règles d’hydratation

Transmettez uniquement des valeurs sérialisables du serveur au client.
Utilisez les mêmes valeurs contrôlées initiales dans les deux environnements.
Lisez le stockage, les préférences du navigateur, window et document dans des effets ou événements.
Initialisez les superpositions fermées, sauf si open est déterministe.

Consultez Premiers pas et SSR et RSC.