From 81423ba338616ef083df47de3e6bdd3166433e28 Mon Sep 17 00:00:00 2001 From: 2239559319 Date: Sat, 2 Dec 2023 20:37:05 +0800 Subject: [PATCH 1/3] fix(doc): use renderToPipeableStream --- src/content/reference/react/useId.md | 37 ++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 96a5e25a237..99d55a6a58d 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -302,3 +302,40 @@ input { margin: 5px; } ``` + +### useId in server rendering {/*useid-in-server-rendering*/} + +Choose a unique id prefix and pass it into the server options and client options. `useId` will return the same id string on server side and client side. The following example selects `react-app1` as the id prefix. + +```js +import { useId } from 'react'; + +function App() { + const id = useId(); + // ... + +``` + +```js +/** + * server side + */ + +import ReactServer from 'react-dom/server'; + +const { pipe } = ReactServer.renderToPipeableStream(, { identifierPrefix: 'react-app1' }); +// ... + +``` + +```js +/** + * client side + */ + +import { hydrateRoot } from 'react-dom/client'; + +const domNode = document.getElementById('root'); +const root = hydrateRoot(domNode, reactNode, { identifierPrefix: 'react-app1' }); + +``` From 5959004b0f19a16bf728c795e664db224ca45f0b Mon Sep 17 00:00:00 2001 From: 2239559319 Date: Sat, 2 Dec 2023 20:48:00 +0800 Subject: [PATCH 2/3] doc: fix identifierPrefix option --- src/content/reference/react-dom/server/renderToNodeStream.md | 3 +++ src/content/reference/react-dom/server/renderToStaticMarkup.md | 2 ++ .../reference/react-dom/server/renderToStaticNodeStream.md | 3 +++ src/content/reference/react-dom/server/renderToString.md | 3 +++ 4 files changed, 11 insertions(+) diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index a4ab2e570f8..fd2464b9793 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -43,6 +43,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. +* **optional** `options`: An object for server render. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + #### Returns {/*returns*/} A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md index 01ff17ee637..f8ec951042d 100644 --- a/src/content/reference/react-dom/server/renderToStaticMarkup.md +++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md @@ -35,6 +35,8 @@ It will produce non-interactive HTML output of your React components. #### Parameters {/*parameters*/} * `reactNode`: A React node you want to render to HTML. For example, a JSX node like ``. +* **optional** `options`: An object for server render. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md index ec3d58937bc..31cfa510023 100644 --- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md +++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md @@ -37,6 +37,9 @@ The stream will produce non-interactive HTML output of your React components. * `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. +* **optional** `options`: An object for server render. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + #### Returns {/*returns*/} A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. The resulting HTML can't be hydrated on the client. diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 41bc6a98283..e126929439f 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -42,6 +42,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * `reactNode`: A React node you want to render to HTML. For example, a JSX node like ``. +* **optional** `options`: An object for server render. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + #### Returns {/*returns*/} An HTML string. From e3d69f3cbde5d905470e706db521309e9642694c Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 2 Dec 2023 14:44:09 +0100 Subject: [PATCH 3/3] Apply suggestions from code review --- src/content/reference/react-dom/server/renderToStaticMarkup.md | 2 +- .../reference/react-dom/server/renderToStaticNodeStream.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md index f8ec951042d..607affd997b 100644 --- a/src/content/reference/react-dom/server/renderToStaticMarkup.md +++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md @@ -36,7 +36,7 @@ It will produce non-interactive HTML output of your React components. * `reactNode`: A React node you want to render to HTML. For example, a JSX node like ``. * **optional** `options`: An object for server render. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md index 31cfa510023..47ef74c3c64 100644 --- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md +++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md @@ -38,7 +38,7 @@ The stream will produce non-interactive HTML output of your React components. * `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. * **optional** `options`: An object for server render. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. #### Returns {/*returns*/}