Merge pull request #53 from reactjs/sync-af54fc87

Sync with react.dev @ af54fc8

Author: zubialevich

Diff for: src/content/learn/start-a-new-react-project.md

@@ -24,7 +24,7 @@ title: Пачаць новы React праект
 npx create-next-app@latest
 </TerminalBlock>
 
-Для знаёмства з Next.js вы можаце азнаёміцца з іх [падручнікам па Next.js.](https://nextjs.org/learn/foundations/about-nextjs)
+Для знаёмства з Next.js вы можаце азнаёміцца з іх [курсам па Next.js.](https://nextjs.org/learn)
 
 Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js](https://nextjs.org/docs/app/building-your-application/deploying) на любым бессерверным хостынгу, Node.js хостынгу або на вашым уласным серверы. Next.js таксама падтрымлівае [экспарт у статычныя файлы](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports), якія не патрабуюць хостынгу.
 

Diff for: 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.

Diff for: 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*/}
 

Diff for: 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.

Diff for: 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.

Diff for: src/content/reference/react/useId.md

@@ -302,3 +302,33 @@ input { margin: 5px; }
 ```
 
 </Sandpack>
+
+---
+
+### Using the same ID prefix on the client and the server {/*using-the-same-id-prefix-on-the-client-and-the-server*/}
+
+If you [render multiple independent React apps on the same page](#specifying-a-shared-prefix-for-all-generated-ids), and some of these apps are server-rendered, make sure that the `identifierPrefix` you pass to the [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) call on the client side is the same as the `identifierPrefix` you pass to the [server APIs](/reference/react-dom/server) such as [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
+
+```js
+// Server
+import { renderToPipeableStream } from 'react-dom/server';
+
+const { pipe } = renderToPipeableStream(
+  <App />,
+  { identifierPrefix: 'react-app1' }
+);
+```
+
+```js
+// Client
+import { hydrateRoot } from 'react-dom/client';
+
+const domNode = document.getElementById('root');
+const root = hydrateRoot(
+  domNode,
+  reactNode,
+  { identifierPrefix: 'react-app1' }
+);
+```
+
+You do not need to pass `identifierPrefix` if you only have one React app on the page.