hydrate

Atención

En React 18, hydrate fue sustituido por hydrateRoot. El uso de hydrate en React 18 advertirá que tu aplicación se comportará como si estuviera ejecutando React 17. Más información here.

hydrate permite mostrar componentes React dentro de un nodo DOM del navegador cuyo contenido HTML ha sido generado previamente por react-dom/server en React 17 y posteriores.

hydrate(reactNode, domNode, callback?)

Uso
Referencia
- hydrate(reactNode, domNode, callback?)

Uso

Llama a hydrate para unir un componente React en un nodo DOM del navegador renderizado por el servidor.

import {hydrate} from 'react-dom';

hydrate(<App />, document.getElementById('root'));

Utilizando hydrate() para hacer una aplicación sólo para clientes (una aplicación sin HTML renderizado en el servidor) no es compatible. Utilice render() (en React 17 e inferior) o createRoot() (en React 18+) en su lugar.

Hydrating HTML renderizado por el servidor

En React, “hydration” es la forma en que React se “adhiere” al HTML existente que ya fue renderizado por React en un entorno de servidor. Durante (hydration), React intentará adjuntar escuchas de eventos al marcado existente y se encargará de renderizar la aplicación en el cliente.

En las aplicaciones totalmente construidas con React, sólo se hidratará (hydrate) un “root”, una vez al inicio para toda la aplicación.

Fork

import './styles.css';
import {hydrate} from 'react-dom';
import App from './App.js';

hydrate(<App />, document.getElementById('root'));

Normalmente no deberías necesitar llamar a hydrate de nuevo o llamarlo en más sitios. A partir de este punto, React gestionará el DOM de tu aplicación. Si quieres actualizar la UI, tus componentes pueden hacerlo [usando state].(/apis/react/useState)

Para más información sobre hydration, consulte la documentación de [hydrateRoot].(/apis/react-dom/client/hydrateRoot)

Errores inevitables de hydration

Si el contenido del atributo o del texto de un solo elemento es inevitablemente diferente entre el servidor y el cliente (por ejemplo, una marca de tiempo), puede silenciar la advertencia de error de hydration.

Para silenciar los avisos de hydration en un elemento, añada suppresshydrationWarning={true}:

Fork

export default function App() {
  return (
    <>
      <h1 suppressHydrationWarning={true}>
        Fecha actual: {new Date().toLocaleDateString()}
      </h1>
    </>
  );
}

Esto sólo funciona a un nivel de profundidad, y pretende ser una escotilla de escape. No lo utilices en exceso. A menos que se trate de contenido de texto, React todavía no intentará parchearlo, por lo que puede permanecer inconsistente hasta futuras actualizaciones.

Manejo de diferentes contenidos del cliente y del servidor

Si necesitas intencionadamente renderizar algo diferente en el servidor y en el cliente, puedes hacer un renderizado de dos pasos. Los componentes que renderizan algo diferente en el cliente pueden leer una variable de estado como isClient, que puedes establecer como true en un effect:

Fork

import { useState, useEffect } from "react";

export default function App() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <h1>
      {isClient ? 'Es Cliente' : 'Es Servidor'}
    </h1>
  );
}

De esta forma, el pase inicial de renderizado renderizará el mismo contenido que el servidor, evitando errores, pero un pase adicional ocurrirá de forma sincronizada justo después de hydration.

Atención

Este enfoque hará que tus componentes sean más lentos porque tienen que renderizar dos veces, así que úsalo con precaución.

Recuerda que debes tener en cuenta la experiencia del usuario en conexiones lentas. El código JavaScript puede cargarse significativamente más tarde que el renderizado inicial del HTML, por lo que si se renderiza algo diferente en el pase del cliente, la transición puede ser discordante. Sin embargo, si se ejecuta bien, puede ser beneficioso renderizar un “shell” de la aplicación en el servidor, y sólo mostrar algunos de los widgets adicionales en el cliente. Para saber cómo hacer esto sin tener problemas de errores de marcado, consulte la explicación del párrafo anterior.

Referencia

`hydrate(reactNode, domNode, callback?)`

Llame a hydrate en React 17 y por debajo para “unir” React al HTML existente que ya fue renderizado por React en un entorno de servidor.

hydrate(reactNode, domNode);

React se unirá al HTML que existe dentro del domNode, y se encargará de gestionar el DOM dentro de él. Una aplicación completamente construida con React normalmente sólo tendrá una llamada a hydrate con su componente raíz.

Vea los ejemplos anteriores.

Parámetros

reactNode: El “nodo React” utilizado para renderizar el HTML existente. Normalmente será un elemento JSX como <App /> que se renderizó con un método ReactDOM Server como renderToString(<App />) en React 17.
domNode: Un elemento DOM que se ha representado como elemento raíz en el servidor.
optional: callback: Es una función. Si se pasa, React la llamará después de que su componente haya llamado hydrated.

Returns

hydrate Devuelve null.

Advertencias

hydrate espera que el contenido renderizado sea idéntico al contenido renderizado por el servidor. React puede parchear las diferencias en el contenido del texto, pero debes tratar los errores de compatibilidad como si se tratara un error y solucionarlos.
En el modo de desarrollo, React avisa de las incompatibilidades durante hydration. No hay garantías de que las diferencias de atributos sean parcheadas en caso de incompatibilidad. Esto es importante por razones de rendimiento, ya que en la mayoría de las aplicaciones, las incompatibilidades son raras, por lo que validar todo el código sería excesivamente complicado.
Es probable que sólo tengas una llamada a “hidrate” en tu aplicación. Si utilizas un framework, es posible que haga esta llamada por ti.
Si tu aplicación está renderizada por el cliente y no tiene HTML renderizado, el uso de hydrate() no está permitido. Utiliza render() (para React 17 e inferior) o createRoot() (para React 18+) en su lugar.

PreviousfindDOMNode Nextrender