Does reflow work with SSR frameworks like Next.js?

[tamish560]

I keep getting hydration mismatch errors with react-responsive. Does reflow handle SSR properly?

[tamish560]

Yes, reflow works in any SSR framework. The core is framework-agnostic and every hook uses useSyncExternalStore with getServerSnapshot.

For Next.js App Router:

import { headers } from "next/headers";
import { resolveBreakpointFromHints } from "reflow/server";
import { ResponsiveProvider } from "reflow/react";

export default async function RootLayout({ children }) {
  const h = await headers();
  const { width } = resolveBreakpointFromHints(h);
  return (
    <ResponsiveProvider serverWidth={width}>
      {children}
    </ResponsiveProvider>
  );
}

For Express, Hono, or any server, use resolveServerBreakpoint(req.headers). It reads Client Hints first, falls back to UA sniffing.

No hydration mismatch warnings. That's the whole point of reflow.