Server Side Rendering
Índice
Hay distintas formas de prerenderizar en el servidor componentes de React:
- podemos generar el html como respuesta a una petición
- podemos tenerlo compilado, lo que se conoce como SSG1
- ISR, Incremental Static Regeneration, donde se podría decir que cachemos lo producido y devolvemos lo cacheado a partir de dicha petición. Podemos hacer que ser regenere la respuesta cada cierto tiempo2
En el primer caso respondemos con renderToString a las peticiones, en el segundo guardamos en disco lo que se genera con la llamada a renderToString.
Hidratación
Cuando obtenemos la página mediante SSR en principio no debe ser más que HTML y CSS. Si queremos interactividad gracias a JavaScript hemos de hidratar el HTML:
- primero cargamos el html+css, mostrando el esqueleto (que puede ser casi toda la página) al usuario
- conectamos todos los elementos que nos hacen la página interactiva: manejadores de eventos, etc.
El segundo paso en principio no debe añadir ningún nodo al DOM.
Para hidratas usamos una función distinta al createRoot típico.
import React from 'react'; import { hydrateRoot } from 'react-dom/client'; function App() { return ( <h1>Hello world!</h1> ); } hydrateRoot(document.querySelector('#root'), <App />);
Esta sería la forma de hacerlo a mano. NextJS se encarga de esto por nosotros.
RSC3
Es como un modo de funcionamiento distinto del habitual de los componentes en el Cliente.
Los componentes del servidor, de forma sorprendente, se renderizan en el servidor, por lo que no pueden tener estado (no pueden re-renderizarse), usar efectos o contexto.
Los componentes de cliente se renderizan también en el servidor, pero se vuelven a renderizar cuando hay cambios en el cliente.
Hemos de definir si un componente se usará en cliente o servidor al inicio si activamos este modo. Si es cliente, empezamos archivo con 'use client', si es servidor, con 'use server'4.
SSR y RSC no son lo mismo, ni RSC es una forma de SSR. RSC está relacionado con pre-renderizar los componentes, y si lo usamos con SSR tal prerrenderizado se realizará en el servidor y devolverá HTML.