bun-react-ssr

Use Bun.serve with renderToString from react-dom/server to render your App component to HTML, wrap it in an HTML document, and return it as a Response. Serve a client bundle built with Bun.build and hydrate it with hydrateRoot on the client.

Use renderToReadableStream from react-dom/server inside a Bun.serve fetch handler and return the stream as the Response body. Pass bootstrapScripts for the client bundle and await stream.allReady when you need Suspense boundaries resolved before sending.

Yes, hydration works by calling hydrateRoot from react-dom/client on the root element with the same App component rendered on the server. Initial server data can be passed through a window.__INITIAL_DATA__ global injected into the HTML.

Hydration mismatch occurs when the server-rendered HTML differs from what the client renders, usually due to differing initial state or browser-only APIs. Guard DOM access with typeof window checks and ensure initial data is identical on both sides.

Custom Bun SSR fits lightweight apps where you control routing, data fetching, and bundling directly. For complex routing, nested layouts, or large teams, a framework like Next.js or Remix provides conventions that manual setups lack.