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.
Hay alguna forma de usar CSS modules en vez de styled jsx, con next.js?
En el repositorio de Next.js hay muchos ejemplos, entre ellos como usar otras formas de estilizar componentes.
Nosotros tenemos una implementación parecida con Next.js i Preact. Usamos dynamic rendering, así que para los bots mostramos 100% con SSR el contenido y no le servimos el JS, totalmente estático, y para los usuarios solo en SSR la parte más visible, y las otras partes con skeleton y se cargan con la API de Intersection Observer al ser visibles en el viewport. De esta forma hace la carga mucho más rapida 🙂! Ahora estoy esperando la feature de la rehydratacion progresiva, a ver cuando aterriza en Preact…
Hola hay forma de hacer lo mismo en vue.js?
Sí. Existen muchas formas, la más rápida es Nuxt.js. 👀
Hola me parece muy interesante el post, te quisiera consultar que documentación o si Platzi posee algún vídeo de ejemplo como el que realizo leonidas en las web isomorphicas para aplicar este tema que me parece super interesante .
Saludos!!