¿No es la renderización del servidor, pero quieres acelerar el rendimiento de tu sitio de React? Prueba la renderización previa.
react-snap es un tercero
biblioteca que renderiza previamente páginas en tu sitio en archivos HTML estáticos. Esto puede
mejora
First Paint
veces en tu aplicación.
Esta es una comparación de la misma aplicación con renderización previa y sin ella cargarse en una conexión 3G simulada y en un dispositivo móvil:
¿Por qué es útil?
El principal problema de rendimiento de las aplicaciones grandes de una sola página es que el usuario debe esperar a que finalicen los paquetes de JavaScript que conforman el sitio descargar antes de que puedan ver cualquier contenido real. Cuanto más grandes sean los paquetes, más tiempo tendrá que esperar el usuario.
Para resolver esto, muchos desarrolladores adoptan el enfoque de renderizar la aplicación en en lugar de solo iniciarlo en el navegador. Con cada de página o ruta, el código HTML completo se genera en el servidor y se envía al navegador, lo que reduce los tiempos de primera pintura, pero tiene un costo Tiempo hasta el primer byte
La renderización previa es una técnica independiente menos compleja que la del servidor. pero también brinda una forma de mejorar los tiempos de la primera pintura en la y mantener la integridad de su aplicación. Se utiliza un navegador sin interfaz gráfica o sin interfaz de usuario. para generar archivos HTML estáticos de cada ruta durante el tiempo de compilación. Estos archivos se pueden enviar junto con los paquetes de JavaScript necesarios y mantener la integridad de su aplicación.
reaccionar-tomar
react-snap usa Puppeteer para
crear archivos HTML renderizados previamente de diferentes rutas en tu aplicación. Para
comenzar, instálalo como una dependencia de desarrollo:
npm install --save-dev react-snap
Luego, agrega una secuencia de comandos postbuild a tu package.json:
"scripts": {
//...
"postbuild": "react-snap"
}
Esto ejecutaría automáticamente el comando react-snap cada vez que una nueva compilación de
las aplicaciones realizadas (npm build).
Lo último que debes hacer es cambiar la forma en que se inicia la aplicación.
Cambia el archivo src/index.js por lo siguiente:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
ReactDOM.hydrate(<App />, rootElement);
} else {
ReactDOM.render(<App />, rootElement);
}
En lugar de solo usar ReactDOM.render para renderizar el elemento raíz de React
directamente en el DOM; esto comprueba si ya hay algún nodo secundario presente
para determinar si el contenido HTML se renderizó previamente (o se renderizó en la
servidor). En ese caso, se usa ReactDOM.hydrate para adjuntar el evento.
de escucha al HTML ya creado, en lugar de crearlo de nuevo.
Crear la aplicación ahora generará archivos HTML estáticos como cargas útiles para para cada ruta que se rastrea. Observa la carga útil de HTML por ejemplo, si haces clic en la URL de la solicitud HTML y, luego, en Vistas previas. dentro de Herramientas para desarrolladores de Chrome.
Destello de contenido sin estilo
Si bien HTML estático ahora se procesa casi de inmediato, aún queda sin estilo de forma predeterminada, lo que puede causar el problema de mostrar un “destello de contenido (FOUC). Esto puede notarse especialmente si usas un lenguaje CSS-in-JS para generar selectores, ya que el paquete de JavaScript deberá finalizar antes de poder aplicar cualquier diseño.
Para evitar esto, el CSS crítico, o la cantidad mínima de CSS
necesario para que se renderice la página inicial, se puede intercalar directamente a <head>
del documento HTML. react-snap usa otra biblioteca de terceros en la
minimalcss, para extraer cualquier
CSS crítico para diferentes rutas. Puedes habilitar esto especificando el
siguiente en tu archivo package.json:
"reactSnap": {
"inlineCss": true
}
Si observas la vista previa de la respuesta en Herramientas para desarrolladores de Chrome, ahora se mostrará la página con estilo con el código CSS crítico intercalado.
Conclusión
Si no representas rutas de renderización del servidor en tu aplicación, usa
react-snap para renderizar previamente el código HTML estático para tus usuarios.
- Instálala como dependencia de desarrollo y comienza solo con la configuración configuración.
- Usa la opción experimental
inlineCsspara intercalar las CSS críticas si funciona. para tu sitio. - Si usas la división de código a nivel de componente dentro de cualquier ruta,
ten cuidado de no representar previamente un estado de carga para tus usuarios. El
Archivo readme de
react-snaptrata este tema con más detalle.