Sync with react.dev @ af54fc8 (#898)

* useId add server rendering usage and server api add options (#6457) Co-authored-by: Sebastian Silbermann <[email protected]> * Edits to useId doc (#6464) * Oops * Fix Next JS link (#6467) * Link to the new Next.js tutorial instead (#6468) * Resolve merge conflicts --------- Co-authored-by: Xiao Chuan <[email protected]> Co-authored-by: Sebastian Silbermann <[email protected]> Co-authored-by: dan <[email protected]> Co-authored-by: Bud (Mugur) Chirica <[email protected]> Co-authored-by: Ahmed Abdelbaset <[email protected]> Co-authored-by: Rainer Martínez Fraga <[email protected]>
reactjs · Dec 11, 2023 · e9053d1 · e9053d1
1 parent c64b3aa
commit e9053d1
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 2 deletions.
diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md
@@ -24,9 +24,9 @@ Si deseas crear una nueva aplicación o un nuevo sitio web completamente con Rea
 npx create-next-app@latest
 </TerminalBlock>
 
-Si eres nuevo en Next.js, mira el [tutorial de Next.js.](https://nextjs.org/learn/foundations/about-nextjs)
+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
@@ -43,6 +43,9 @@ 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 `<App />`.
 
+* **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)
+
 #### 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
@@ -35,6 +35,8 @@ Esto producirá una salida de HTML no interactiva de tus componentes de React.
 #### Parámetros {/*parameters*/}
 
 * `reactNode`: Un nodo React que deseas renderizar a HTML. Por ejemplo, un nodo JSX como `<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.
 
 #### Devuelve {/*returns*/}
 

diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
@@ -37,6 +37,9 @@ 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 `<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.
+
 #### 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
@@ -42,6 +42,9 @@ 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 `<App />`.
 
+* **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)
+
 #### Devuelve {/*returns*/}
 
 Una cadena de caracteres HTML.

diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
@@ -303,3 +303,33 @@ input { margin: 5px; }
 ```
 
 </Sandpack>
+
+---
+
+### Uso del mismo prefijo de ID en el cliente y el servidor {/*using-the-same-id-prefix-on-the-client-and-the-server*/}
+
+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
+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' }
+);
+```
+
+No necesitas pasar `identifierPrefix` si solo tienes una aplicación de React en la página.