bun.sh/docs/guides/ecosystem/ssr-react.md at 4e2d00d052daf82d544d48508c9ad3596845b508

mirror of https://github.com/oven-sh/bun synced 2026-02-10 02:48:50 +00:00

Files

Colin McDonnell 404b90badc Add ecosystem guides (#3847 )

* Add ecosystem guides

* Update titles

* Rename stric

* Add unlink and fetch guides

* Add formdata guide

* Tweak title

* Moar

2023-07-31 12:20:23 -07:00

910 B

Raw Blame History

name

name
Server-side render (SSR) a React component

To render a React component to an HTML stream server-side (SSR):

import { renderToReadableStream } from "react-dom/server";

function Component(props: { message: string }) {
  return (
    <body>
      <h1>{props.message}</h1>
    </body>
  );
}

const stream = await renderToReadableStream(
  <Component message="Hello from server!" />,
);

Combining this with Bun.serve(), we get a simple SSR HTTP server:

Bun.serve({
  async fetch() {
    const stream = await renderToReadableStream(
      <Component message="Hello from server!" />,
    );
    return new Response(stream, {
      headers: { "Content-Type": "text/html" },
    });
  },
});

React 18.3 and later includes an SSR optimization that takes advantage of Bun's "direct" ReadableStream implementation.

910 B Raw Blame History

910 B

Raw Blame History