Implementación de Progressive Server-Side Render con Next.js

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.

Nuestro código

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.

 

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 />.

Conclusiones

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.

Compartir