From b1c4b4e6de827dbbe5e0f759f00b5f8edb7b800c Mon Sep 17 00:00:00 2001 From: Xiao Chuan Date: Wed, 6 Dec 2023 00:34:18 +0800 Subject: [PATCH 1/6] useId add server rendering usage and server api add options (#6457) Co-authored-by: Sebastian Silbermann --- .../react-dom/server/renderToNodeStream.md | 3 ++ .../react-dom/server/renderToStaticMarkup.md | 2 + .../server/renderToStaticNodeStream.md | 3 ++ .../react-dom/server/renderToString.md | 3 ++ src/content/reference/react/useId.md | 37 +++++++++++++++++++ 5 files changed, 48 insertions(+) diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index a4ab2e570..fd2464b97 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 01ff17ee6..607affd99 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. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md index ec3d58937..47ef74c3c 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. + #### 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 41bc6a982..e12692943 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. diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 96a5e25a2..99d55a6a5 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 4226fbf3bfcd3f48c7ab21053a8f4720a1129251 Mon Sep 17 00:00:00 2001 From: dan Date: Tue, 5 Dec 2023 20:17:43 +0000 Subject: [PATCH 2/6] Edits to useId doc (#6464) --- src/content/reference/react/useId.md | 41 ++++++++++++---------------- 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 99d55a6a5..81cb3a30f 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -303,39 +303,32 @@ 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. +### Using the same ID prefix on the client and the server {/*using-the-same-id-prefix-on-the-client-and-the-server*/} -```js -import { useId } from 'react'; - -function App() { - const id = useId(); - // ... - -``` +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](https://react.dev/reference/react-dom/server) such as [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) ```js -/** - * server side - */ - -import ReactServer from 'react-dom/server'; - -const { pipe } = ReactServer.renderToPipeableStream(, { identifierPrefix: 'react-app1' }); -// ... +// Server +import { renderToPipeableStream } from 'react-dom/server'; +const { pipe } = renderToPipeableStream( + , + { identifierPrefix: 'react-app1' } +); ``` ```js -/** - * client side - */ - +// Client import { hydrateRoot } from 'react-dom/client'; const domNode = document.getElementById('root'); -const root = hydrateRoot(domNode, reactNode, { identifierPrefix: 'react-app1' }); - +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. From b9bf6664626a0f0f227db2ba7874018fd183644f Mon Sep 17 00:00:00 2001 From: dan Date: Tue, 5 Dec 2023 20:19:06 +0000 Subject: [PATCH 3/6] Oops --- src/content/reference/react/useId.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 81cb3a30f..6d3c01674 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -307,7 +307,7 @@ input { margin: 5px; } ### 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](https://react.dev/reference/react-dom/server) such as [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) +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 From ae4be842dd7f464f0e45a1391845dcec5115ad91 Mon Sep 17 00:00:00 2001 From: "Bud (Mugur) Chirica" Date: Wed, 6 Dec 2023 14:53:27 +0000 Subject: [PATCH 4/6] Fix Next JS link (#6467) --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 9c395d3f0..39bd40e5c 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -24,7 +24,7 @@ If you want to build a new app or a new website fully with React, we recommend p npx create-next-app@latest -If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs) +If you're new to Next.js, check out the [Next.js documentation.](https://nextjs.org/docs) Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server. From af54fc873819892f6050340df236f33a18ba5fb8 Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Thu, 7 Dec 2023 00:34:28 +0200 Subject: [PATCH 5/6] Link to the new Next.js tutorial instead (#6468) --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 39bd40e5c..a98e09669 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -24,7 +24,7 @@ If you want to build a new app or a new website fully with React, we recommend p npx create-next-app@latest -If you're new to Next.js, check out the [Next.js documentation.](https://nextjs.org/docs) +If you're new to Next.js, check out the [learn Next.js course.](https://nextjs.org/learn) Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server. From 5a129f09a21f498f319beaba4b0d6025806ad94a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Sun, 10 Dec 2023 20:11:48 -0500 Subject: [PATCH 6/6] Resolve merge conflicts --- src/content/learn/start-a-new-react-project.md | 8 ++------ .../reference/react-dom/server/renderToNodeStream.md | 10 +++------- .../reference/react-dom/server/renderToStaticMarkup.md | 8 ++------ .../react-dom/server/renderToStaticNodeStream.md | 10 +++------- .../reference/react-dom/server/renderToString.md | 10 +++------- src/content/reference/react/useId.md | 6 +++--- 6 files changed, 16 insertions(+), 36 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 47fbd905e..76b3e2bb9 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -24,13 +24,9 @@ Si deseas crear una nueva aplicación o un nuevo sitio web completamente con Rea npx create-next-app@latest -<<<<<<< HEAD -Si eres nuevo en Next.js, mira el [tutorial de Next.js.](https://nextjs.org/learn/foundations/about-nextjs) -======= -If you're new to Next.js, check out the [learn Next.js course.](https://nextjs.org/learn) ->>>>>>> af54fc873819892f6050340df236f33a18ba5fb8 +Si no tienes experiencia con Next.js, prueba el [curso introductorio de Next.js.](https://nextjs.org/learn) -Next.js es mantenido por [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/app/building-your-application/deploying) en cualquier alojamiento Node.js o sin servidor, o en tu propio servidor. Next.js también admite una [exportación estática](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) que no requiere un servidor. +El mantenimiento de Next.js está a cargo de [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/app/building-your-application/deploying) en cualquier alojamiento de Node.js, *serverless*, o en tu propio servidor. Next.js también admite una [exportación estática](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) que no requiere un servidor. ### Remix {/*remix*/} diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index 44fd1e07a..2c14f9fde 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -43,14 +43,10 @@ En el cliente, llama a [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) * `reactNode`: Un nodo de React que deseas representar en HTML. Por ejemplo, un elemento JSX como ``. -<<<<<<< HEAD -#### Devuelve {/*returns*/} -======= -* **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) +* **opcional** `options`: Un objeto de configuración para el renderizado en el servidor. + * **opcional** `identifierPrefix`: Un prefijo de *string* que React utiliza para los IDs generados por [`useId`.](/reference/react/useId) Es útil para evitar conflictos cuando se utilizan múltiples raíces en la misma página. Debe ser el mismo prefijo que se pasa a [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) -#### Returns {/*returns*/} ->>>>>>> af54fc873819892f6050340df236f33a18ba5fb8 +#### Devuelve {/*returns*/} Un [*Stream* legible de Node.js](https://nodejs.org/api/stream.html#readable-streams) que produce una cadena de HTML. diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md index fa0b2d408..73af3226e 100644 --- a/src/content/reference/react-dom/server/renderToStaticMarkup.md +++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md @@ -34,13 +34,9 @@ Esto producirá una salida de HTML no interactiva de tus componentes de React. #### Parámetros {/*parameters*/} -<<<<<<< HEAD * `reactNode`: Un nodo React que deseas renderizar a HTML. Por ejemplo, un nodo JSX como ``. -======= -* `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. ->>>>>>> af54fc873819892f6050340df236f33a18ba5fb8 +* **opcional** `options`: Un objeto de configuración para el renderizado en el servidor. + * **opcional** `identifierPrefix`: Un prefijo de *string* que React utiliza para los IDs generados por [`useId`.](/reference/react/useId) Es útil para evitar conflictos cuando se utilizan múltiples raíces en la misma página. #### Devuelve {/*returns*/} diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md index 7adfd000a..e25f1a68e 100644 --- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md +++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md @@ -37,14 +37,10 @@ El stream producirá, en la salida, HTML no interactivo de tus componentes de Re * `reactNode`: Un nodo de React que quieres renderizar a HTML. Por ejemplo, un elemento JSX como ``. -<<<<<<< HEAD -#### Devuelve {/*returns*/} -======= -* **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. +* **opcional** `options`: Un objeto de configuración para el renderizado en el servidor. + * **opcional** `identifierPrefix`: Un prefijo de *string* que React utiliza para los IDs generados por [`useId`.](/reference/react/useId) Es útil para evitar conflictos cuando se utilizan múltiples raíces en la misma página. -#### Returns {/*returns*/} ->>>>>>> af54fc873819892f6050340df236f33a18ba5fb8 +#### Devuelve {/*returns*/} Un [Stream legible de Node.js](https://nodejs.org/api/stream.html#readable-streams) que produce un string HTML como salida. El HTML resultante no puede hidratarse en el cliente. diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 3d4f87cf2..2489e16b4 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -42,14 +42,10 @@ En el cliente, llama a [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) * `reactNode`: Un nodo de React que deseas renderizar como HTML. Por ejemplo, un nodo JSX como ``. -<<<<<<< HEAD -#### Devuelve {/*returns*/} -======= -* **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) +* **opcional** `options`: Un objeto de configuración para el renderizado en el servidor. + * **opcional** `identifierPrefix`: Un prefijo de *string* que React utiliza para los IDs generados por [`useId`.](/reference/react/useId) Es útil para evitar conflictos cuando se utilizan múltiples raíces en la misma página. Debe ser el mismo prefijo que se pasa a [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) -#### Returns {/*returns*/} ->>>>>>> af54fc873819892f6050340df236f33a18ba5fb8 +#### Devuelve {/*returns*/} Una cadena de caracteres HTML. diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index ac59da158..025082abd 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -306,9 +306,9 @@ input { margin: 5px; } --- -### Using the same ID prefix on the client and the server {/*using-the-same-id-prefix-on-the-client-and-the-server*/} +### Uso del mismo prefijo de ID en el cliente y el servidor {/*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) +Si [renderizas múltiples aplicaciones de React independientes en la misma página](#specifying-a-shared-prefix-for-all-generated-ids), y algunas de esas aplicaciones son renderizadas en el servidor, asegúrate de que el prefijo `identifierPrefix` que le pases a la llamada a [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) en el lado del cliente sea el mismo `identifierPrefix` que le pases a las [APIs del servidor](/reference/react-dom/server) tales como [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) ```js // Server @@ -332,4 +332,4 @@ const root = hydrateRoot( ); ``` -You do not need to pass `identifierPrefix` if you only have one React app on the page. +No necesitas pasar `identifierPrefix` si solo tienes una aplicación de React en la página.