@composi/core:

Hidratación

Reusar Contenido del Servidor

A menudo querrás contenido renderizado en el servidor para carga de páginas más rápida y mejor SEO. La hidratación le permite usar contenido renderizado por el servidor y agregar comportamiento dinámico al convertirlo en un componente después de cargar la página. Composi admite la hidratación mediante su función render. Ten en cuenta que si va a hidratar contenido en el documento, debe ser HTML estático creado en el servidor. No intente hidratar un componente. Eso no tiene sentido que puede causar que el componente se confunda con cómo actualizarse.

Hidratar el Contenido

Para hidratar el contenido, pasa a render un tercer argumento para el elemento en el DOM que deseas hidratar. Esto puede ser una referencia al elemento, o un selector de texto válido. Tenga en cuenta que un selector genérico capturará la primera presencia en el DOM, que podría no ser lo que esperabas. Sea lo más específico posible al usar selectores. Cuando pasas un tercer argumento a render, toma ese elemento y esto crea un nodo virtual a partir de él. Luego se usará ese nodo virutal para diferenciar y parchar el DOM para la hidratación.

See the Pen @composi/core - Hidratción by Robert Biggs (@rbiggs) on CodePen.