diff options
| author |  Colin McDonnell <colinmcd94@gmail.com>
| 2023-07-31 12:20:23 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-07-31 12:20:23 -0700 |
| commit | 404b90badc5856a74c06d04062c850003e28fed5 (patch) | |
| tree | 7954623cf4a792db612d0bb229a227c2ff1e9fd8 /docs/guides/ecosystem/ssr-react.md | |
| parent | 67599f97adc77141331a5f4fc39e4d058dc70b2a (diff) | |
| download | bun-404b90badc5856a74c06d04062c850003e28fed5.tar.gz bun-404b90badc5856a74c06d04062c850003e28fed5.tar.zst bun-404b90badc5856a74c06d04062c850003e28fed5.zip | |
Add ecosystem guides (#3847)
* Add ecosystem guides
* Update titles
* Rename stric
* Add unlink and fetch guides
* Add formdata guide
* Tweak title
* Moar
Diffstat (limited to 'docs/guides/ecosystem/ssr-react.md')
| -rw-r--r-- | docs/guides/ecosystem/ssr-react.md | 42 |
1 files changed, 42 insertions, 0 deletions
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 ( + <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: + +```tsx +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](https://github.com/facebook/react/pull/25597) that takes advantage of Bun's "direct" `ReadableStream` implementation. |