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

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!

Leonardo Garrido

student•

import { ServerStyleSheet } from "styled-components";

Jesús Manuel Alarcón Maldonado

student•

💻 Código de la clase de hoy:

export const render = (url: string, initialProps = {}) => {
    const sheet = new ServerStyleSheet();
    try {
        const stream = renderToString(
            sheet.collectStyles(
                <StaticRouter location={url}>
                    <App />
                </StaticRouter>
            )
        )

        const styleTags = sheet.getStyleTags(); // or sheet.getStyleElement()

        const html = template(stream, initialProps, styleTags);

        return html;
    } catch (error) {
        // handle error
        console.error(error);
    } finally {
        sheet.seal();
    }

}

Y en el template quedaría:

export const template = (html: string, initialProps = {}, styles=''): string => {
    return (
        `
            <!DOCTYPE html>
            <html lang="en">

            <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link rel="preconnect" href="https://fonts.googleapis.com">
              <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
              <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600&display=swap" rel="stylesheet">
              <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
              <title>Helix App</title>
              ${styles}
            </head>

            <body>
              <div id="app">${html}</div>

              <script>window.__INITIAL_PROPS__ = ${JSON.stringify(initialProps)}</script>
              <script src="app.js" type="text/javascript" ></script>
            </body>

            </html>
        `
    )
}

Espero les sirva :)

Mateo Vidal

student•

no me gusto las malas practicas de inyectar los estilos y los props en el html, me gustaria que mostraran o al menos mencionaran la forma correcta de hacerlo

Kengya Moncada

student•

me gustó esta clase! algo que me ha sucedido.

export const render = (url: string, initialProps = {}) => {
    const sheet = new ServerStyleSheet();
    try {
        const stream = renderToString(
            sheet.collectStyles(
                <StaticRouter location={url}>
                    <App />
                </StaticRouter>
            )
        )

        const styleTags = sheet.getStyleTags(); // or sheet.getStyleElement()

        const html = template(stream, initialProps, styleTags);

        return html;
    } catch (error) {
        // handle error
        console.error(error);
    } finally {
        sheet.seal();
    }

}

export const template = (html: string, initialProps = {}, styles=''): string => {
    return (
        `
            <!DOCTYPE html>
            <html lang="en">

            <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link rel="preconnect" href="https://fonts.googleapis.com">
              <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
              <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600&display=swap" rel="stylesheet">
              <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
              <title>Helix App</title>
              ${styles}
            </head>

            <body>
              <div id="app">${html}</div>

              <script>window.__INITIAL_PROPS__ = ${JSON.stringify(initialProps)}</script>
              <script src="app.js" type="text/javascript" ></script>
            </body>

            </html>
        `
    )
}

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

Fundamentos de SSR

Server Side Rendering con ReactJS: Fundamentos y Aplicaciones

Problemas y limitaciones de las Single Page Applications (SPAs)

Creación y Funcionamiento de una SPA con Create React App

Renderizado en el Cliente vs. Servidor: Comparativa y Aplicaciones

Ventajas y desventajas del Server Side Rendering

Crea tu primer app con SSR

Transformación de Aplicaciones React a Server-Side Rendering

Configuración de Webpack para Servidor Node con TypeScript

Servidor Express con TypeScript: Configuración y Primeros Pasos

Creación de Plantillas HTML Dinámicas en TypeScript

Renderizado e Hidratación de Aplicaciones React en el Servidor

Renderizado e Hidratación de React con Server-Side Rendering

Renderizado en Servidor: Peticiones y Transferencia de Datos a Cliente

Inyección de Props en React para Server-Side Rendering

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

Bonus

Configuración de Webpack y Hot Module Replacement en Express

Comparativa de Rendimiento: Nuestro Motor vs Next.js en Service Render

Mejoras a Proyecto Helix Eye con API de NASA