Skip to content

Commit

Permalink
Merge branch 'sync-af54fc87'
Browse files Browse the repository at this point in the history
  • Loading branch information
carburo committed Dec 11, 2023
2 parents 64cb8a6 + 5a129f0 commit 3c78ee5
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/content/learn/start-a-new-react-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}

Expand Down
3 changes: 3 additions & 0 deletions src/content/reference/react-dom/server/renderToNodeStream.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
3 changes: 3 additions & 0 deletions src/content/reference/react-dom/server/renderToString.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
30 changes: 30 additions & 0 deletions src/content/reference/react/useId.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

0 comments on commit 3c78ee5

Please sign in to comment.