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

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>

      <NoSSR onSSR={loading}>
        <section>
          <h2>
            Esta parte <em>no</em> se renderiza en el servidor.
          </h2>
        </section>
      </NoSSR>

      <style jsx>{`
        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 />.

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.