useId add server rendering usage and server api add options (#6457)

Co-authored-by: Sebastian Silbermann <[email protected]>

Author: 2239559319

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 `<App />`.
 
+* **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.

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 `<Page />`.
+* **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.
 
 #### Returns {/*returns*/}
 

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 `<Page />`.
 
+* **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.
+
 #### 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.

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 `<App />`.
 
+* **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.

src/content/reference/react/useId.md

@@ -302,3 +302,40 @@ input { margin: 5px; }
 ```
 
 </Sandpack>
+
+### 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(<App />, { 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' });
+
+```