From 404b90badc5856a74c06d04062c850003e28fed5 Mon Sep 17 00:00:00 2001 From: Colin McDonnell Date: Mon, 31 Jul 2023 12:20:23 -0700 Subject: Add ecosystem guides (#3847) * Add ecosystem guides * Update titles * Rename stric * Add unlink and fetch guides * Add formdata guide * Tweak title * Moar --- docs/guides/ecosystem/ssr-react.md | 42 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 docs/guides/ecosystem/ssr-react.md (limited to 'docs/guides/ecosystem/ssr-react.md') diff --git a/docs/guides/ecosystem/ssr-react.md b/docs/guides/ecosystem/ssr-react.md new file mode 100644 index 000000000..59d37db46 --- /dev/null +++ b/docs/guides/ecosystem/ssr-react.md @@ -0,0 +1,42 @@ +--- +name: Server-side render (SSR) a React component +--- + +To render a React component to an HTML stream server-side (SSR): + +```tsx +import { renderToReadableStream } from "react-dom/server"; + +function Component(props: { message: string }) { + return ( + +

{props.message}

+ + ); +} + +const stream = await renderToReadableStream( + , +); +``` + +--- + +Combining this with `Bun.serve()`, we get a simple SSR HTTP server: + +```tsx +Bun.serve({ + async fetch() { + const stream = await renderToReadableStream( + , + ); + return new Response(stream, { + headers: { "Content-Type": "text/html" }, + }); + }, +}); +``` + +--- + +React `18.3` and later includes an [SSR optimization](https://github.com/facebook/react/pull/25597) that takes advantage of Bun's "direct" `ReadableStream` implementation. -- cgit v1.2.3