Server rendering

Use Liquidify with SSR and React Server Components without hydration drift.

Keep data loading, document structure, and non-interactive layout on the server. Put the client directive in the smallest module that owns Liquidify interaction.

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

import { Button } from "@liquidify/react"

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

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

Import @liquidify/react/styles.css from the framework's root layout or global stylesheet entry.

Hydration rules

Pass only serializable values across a Server Component boundary.
Seed controlled values identically on the server and first client render.
Read browser storage, media state, window, and document in an effect or event handler.
Keep overlays closed initially unless open is deterministic in both environments.

Liquidify overlays mount floating content through a portal only when open. Internal IDs use React's server-safe ID mechanism, so consumers should not replace them with render-time random values.

Framework-specific setup is available in Getting started. The lower-level contract is documented in SSR and React Server Components.