Skip to content

Commit 462bb71

Browse files
committed
Add SSR notes on renderToString versus renderToPipeableStream
1 parent fb0f1f9 commit 462bb71

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

docs/guides/ssr.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,8 @@ app.get("*", async (req, res) => {
139139
});
140140
```
141141

142+
<docs-info>We use [`renderToString`][rendertostring] here for simplicity since we've already loaded our data in `handler.query` and we're not using any streaming features in this simple example. If you need to support streaming features, you would need to use [`renderToPipeableStream`][rendertopipeablestream].<br/><br/>If you wish to support [`defer`][defer], you will also need to manage serializing the server-side Promises over the wire to the client (hint, just use [Remix][remix] where this is handled for you via the `Scripts` component 😉).</docs-info>
143+
142144
Once we've sent the HTML back to the browser, we'll need to "hydrate" the application on the client using `createBrowserRouter()` and `<RouterProvider>`:
143145

144146
```jsx filename=entry-client.jsx lines=[10-15]
@@ -280,6 +282,8 @@ app.get("*", (req, res) => {
280282
app.listen(3000);
281283
```
282284
285+
<docs-info>We use [`renderToString`][rendertostring] here for simplicity since we're not using any streaming features in this simple example. If you need to support streaming features, you would need to use [`renderToPipeableStream`][rendertopipeablestream].</docs-info>
286+
283287
And finally, you'll need a similar file to "hydrate" the app with your JavaScript bundle that includes the very same `App` component. Note the use of `BrowserRouter` instead of `StaticRouter`.
284288
285289
```js filename=client.entry.js
@@ -320,3 +324,6 @@ Again, we recommend you give [Remix](https://remix.run) a look. It's the best wa
320324
[hydration]: https://react.dev/reference/react-dom/client/hydrateRoot
321325
[hydrate-false]: ../routers/static-router-provider#hydrate
322326
[partialhydration]: ../routers/create-browser-router#partial-hydration-data
327+
[rendertostring]: https://react.dev/reference/react-dom/server/renderToString
328+
[rendertopipeablestream]: https://react.dev/reference/react-dom/server/renderToPipeableStream
329+
[defer]: https://reactrouter.com/en/main/utils/defer

0 commit comments

Comments
 (0)