Extracción e Inyección de Estilos con Server Side Rendering

Clase 14 de 17 • Curso de Server Side Render o SSR con React.js

Clase anteriorSiguiente clase

Resumen

¿Cómo mejorar el renderizado de estilos en tu aplicación web?

Es fundamental que una aplicación web no solo funcione correctamente, sino que también luzca atractiva y cohesiva desde el primer momento en que el usuario la ve. Un desafío común al renderizar aplicaciones es el manejo de los estilos desde el lado del servidor (Server Side Rendering o SSR). Vamos a explorar cómo solucionar el problema de estilos desagradables en aplicaciones al utilizar librerías como styled-components y asegurar que se vean bien desde el inicio.

¿Cuál es el problema inicial con los estilos?

Un problema común en las aplicaciones web es el "flickering" de estilos cuando la primera instantánea de tu HTML se envía desde el servidor. Ese parpadeo se debe a que los estilos no se cargan correctamente, haciendo que tu aplicación luzca mal antes de que el JavaScript se ejecute por completo en el cliente.

¿Cómo se puede solucionar el flickering de estilos?

Para solucionar este problema, utilizamos styled-components, una librería muy popular en la comunidad de desarrollo de React. Esta librería soporta Server Side Rendering (SSR) y permite extraer los estilos ya listos para ser usados en el lado del servidor. Te guiaré en la implementación de este proceso.

Paso 1: Crear una instancia de ServerStyleSheet

Primero, debes crear una instancia de ServerStyleSheet para capturar los estilos. Este objeto permitirá extraer todos los estilos necesarios para renderizar en el servidor.

import { ServerStyleSheet } from 'styled-components';

const sheet = new ServerStyleSheet();

Paso 2: Envolver la aplicación con collectStyles

Debemos envolver toda la aplicación con sheet.collectStyles para capturar todos los estilos.

const app = sheet.collectStyles(<App />);

Paso 3: Obtener las style tags

Utiliza el método getStyleTags para transformar estos estilos en tags válidos de CSS, que pueden ser usados dentro de tu template de HTML.

const styleTags = sheet.getStyleTags();

Paso 4: Inyectar los estilos en el template del HTML

Finalmente, debes inyectar estos estilos en el head de tu documento HTML, de modo que se rendericen antes de cargar el JavaScript.

<!DOCTYPE html>
<html>
  <head>
    {styleTags}
  </head>
  <body>
    <div id="root">${app}</div>
  </body>
</html>

¿Qué se debe verificar después de la implementación?

Una vez implementado, al recargar tu aplicación deberías notar que el flickering desaparece y los estilos se aplican correctamente desde el inicio. También puedes desactivar JavaScript para asegurarte de que los estilos se han inyectado correctamente.

¿Cuáles son algunas buenas prácticas adicionales?

  • Remover etiquetas innecesarias: Una vez que el DOM se ha cargado completamente y el JavaScript es ejecutado, considera remover las etiquetas de estilos que ya no son necesarias. Esto puede hacerse manipulando el DOM a medida que tu app crece.

  • Usar plugins para optimización de CSS: Considera utilizar plugins de Webpack para manejar de manera más eficiente la extracción e inyección de CSS en tu aplicación.

Sigue explorando y experimentando con diferentes configuraciones y herramientas. La mejora continua es clave en el desarrollo web. ¡Sigue investigando y no te desanimes si encuentras obstáculos en el camino!