Les paquets Liquidify utilisent ESM. Les contrôles interactifs et les fournisseurs de matériaux sont des composants clients. Les pages, le chargement des données et les layouts peuvent rester sur le serveur.

Dans Next.js, ajoutez la directive client au plus petit module qui gère l’interaction :

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

import { Button } from "@liquidify/react"

export function SaveButton() {
  return <Button onPress={() => console.log("save")}>Enregistrer</Button>
}

Un composant serveur peut afficher ce composant et lui transmettre des données sérialisables. Ne transmettez pas de callbacks, de nœuds DOM ni d’autres valeurs non sérialisables.

Importez @liquidify/react/styles.css dans l’entrée globale des styles ou le layout racine. Gardez les mêmes valeurs contrôlées initiales dans les deux environnements. Placez la logique du navigateur dans des effets ou événements, pas lors de l’évaluation du module.