Cuando renderizamos una aplicación normalmente decidimos entre hacer server-side render o client-side render. También existe la opción de usar ambos métodos para iniciar nuestra aplicación con server-side render y que luego mediante client-side render hagamos los cambios de vistas o actualizaciones de datos.
Resulta que al combinar ambos métodos podemos usar otra técnica llamada progressive server-side render. Esto significa renderizar una parte de nuestra aplicación en el servidor, normalmente el above the fold, y el resto en el navegador.
Esta técnica es usada actualmente por Netflix para cargar super rápido. Vamos a ver como implementar esta técnica en una aplicación de React.js usando Next.js.
Lo primero que vamos a hacer es instalar nuestras dependencias.
yarn add next react react-dom react-no-ssr
De estas dependencias react-no-ssr es el que va a hacer la magia acá. Lo que hace este muy pequeño componente (19 líneas de código) es solo renderizar los componentes que indiquemos en el navegador y darnos la posibilidad de definir otro componente para el servidor (como un mensaje de cargando).
Ahora vamos a crear un archivo index.js dentro de ./pages con este contenido.
import React from'react';
import NoSSR from'react-no-ssr';
import Loading from'../components/loading';
const loading = <Loading />;
function HomePage() {
return (
<main><section><h1>
Esta parte se renderiza en el servidor.
</h1></section><NoSSRonSSR={loading}><section><h2>
Esta parte <em>no</em> se renderiza en el servidor.
</h2></section></NoSSR><stylejsx>{`
section {
align-items: center;
display: flex;
height: 50vh;
justify-content: center;
}
`}</style></main>
);
}
export default HomePage;
Luego en nuestro package.json vamos a agregar un script dev que corra el comando next y vamos a correr yarn dev. Esto va a iniciar un servidor HTTP en el puerto 3000 donde vamos a poder usar nuestra aplicación.
Al entrar probablemente el JS del cliente cargue muy rápido para que notemos el efecto de NoSSR, pero ya sea que desactivemos JS o que limitemos nuestra velocidad de descarga (a 2G por ejemplo) vamos a notar que se renderizó el primer <section /> y el contenido que hayamos colocado en el componente Loading y luego cuando se inicie la aplicación en el cliente se renderiza el segundo <section />.
Este es un ejemplo super simple, pero como se puede ver es muy fácil implementar este componente react-no-ssr para evitar renderizar partes en el servidor.
Hacer esto nos ayudaría a solo renderizar las partes más importantes de nuestra aplicación como el above the fold o que se necesiten para el SEO. Y luego en el cliente hacer render del resto de la aplicación, por ejemplo si tenemos un sistema de comentarios podemos solo renderizarlo en el navegador y dejar al server-render el contenido principal de nuestro sitio.
Esto beneficia al usuario al recibir el contenido importante más rápido y a nuestro servidor de render a pasar menos tiempo haciendo el render. Además de reducir la cantidad de HTML enviado por lo que el sitio pesaría menos.
