La representación del lado del servidor (SSR) es una técnica muy útil que hace que las aplicaciones web aparezcan más rápido. El HTML inicial se muestra antes de analizar el JavaScript y, mientras el usuario decide qué tocar, nuestros controladores están listos.
La representación del lado del servidor en React requiere trabajo adicional para la configuración y tiene costos de servidor. Además, si su equipo de servidores no puede ejecutar JavaScript en sus servidores, está atascado. Complica significativamente la configuración de CDN, especialmente si tiene páginas que requieren inicio de sesión y donde se administra la información del usuario.
Quiero recorrer un nuevo concepto llamado Render Caching. Este es un truco genial que puede brindar a los usuarios un aumento instantáneo del rendimiento como el de SSR sin tener que recurrir a escribir código en el servidor.
¿Qué es el almacenamiento en caché de renderizado?
La migración de páginas HTML estáticas a aplicaciones de una sola página (SPA) ha dejado un gran vacío en todo el concepto de almacenamiento en caché en el que tradicionalmente se ha basado la web. Mientras que los navegadores optimizan la entrega y la representación del HTML inicial, un SPA los deja en blanco para completarlos más tarde.
El almacenamiento en caché de renderizado optimiza el renderizado de SPA y puede mejorar significativamente el tiempo de carga perceptible de las páginas web. Lo hace almacenando en caché el HTML renderizado en el navegador para la próxima carga y puede proporcionar esa visualización sin el análisis de JavaScript que consume nuestro tiempo de visualización.
Habilitación del almacenamiento en caché de renderizado
Mencionamos anteriormente que configurar SSR para React requiere costos adicionales de configuración y servidor. El almacenamiento en caché de renderizado evita esas cargas.
Se necesitan algunos pasos para configurarlo. Vamos a dividirlo en pedazos digeribles.
Paso 1: determinar el estado de almacenamiento en caché correcto
Averigüe las condiciones para la página actual donde se mostraría lo mismo cuando un usuario la abra en la próxima visita.
Por ejemplo, puede crear un objeto JSON con el número de compilación actual o una ID de usuario. La clave es garantizar que el estado esté encapsulado en la URL, el almacenamiento local o las cookies y no necesite una llamada al servidor.
Paso 2: configurar las llamadas a la API
Asegúrese de que todas las llamadas a la API sucedan antes de que la llamada a renderizar reaccione. Esto también tiene sentido en casos de uso regulares en los que queremos evitar que la página cambie debajo del usuario, lo que provoca parpadeos.
Paso 3: almacenar en caché localmente en el controlador de descarga
Ahora agregue un controlador de eventos de descarga al documento. Almacene el DOM actual en localStorage/indexDB.
Eso se parece a esto, usando un número de compilación y una ID de usuario para determinar el estado de almacenamiento en caché cubierto en el Paso 1:
window.addEventListener("beforeunload", () => {
// Production code would also be considerate of localStorage size limitations
// and would do a LRU cache eviction to maintain sanity on storage.
// There should also be a way to clear this data when the user signs out
window.localStorage.setItem(
`lastKnown_${window.location.href}`,
JSON.stringify({
conditions: {
userId: "<User ID>",
buildNo: "<Build No.>"
},
data: document.getElementById("content").innerHTML
})
);
});
// If you want to store data per user, you can add user ID to the key instead of the condition.Paso 4: Restaurar el último estado conocido en la carga
A continuación, queremos extraer el último estado conocido del almacenamiento local del navegador para poder usarlo en futuras visitas. Hacemos esto agregando lo siguiente al archivo HTML (por ejemplo, `index.html` debajo de la etiqueta del cuerpo del documento.
<!-- ... -->
</body>
<script>
let lastKnownState = window.localStorage.getItem(`lastKnown_${window.location.href}`);
lastKnownState = lastKnownState && JSON.parse(lastKnownState);
if (lastKnownState &&
lastKnownState.conditions.userId === "<User ID>" &&
lastKnownState.conditions.buildNo === "<Build No.>") {
document.getElementById('content').innerHTML = lastKnownState.data;
window.hasRestoredState = true;
}
</script>Paso 5: renderiza el último estado conocido en React
Aquí es donde las ruedas encuentran el camino. Ahora que tenemos el último estado conocido del usuario visible en el DOM, podemos obtener el contenido completo y renderizar nuestra aplicación en ese estado actualizando el nivel superior del renderizado de React con hidrato condicionalmente. Los controladores de eventos se volverán funcionales una vez que llegue este código, pero el DOM no debería cambiar.
import {render, hydrate} from "react-dom"
if (window.hasRestoredState) {
hydrate(<MyPage />, document.getElementById('content'));
} else {
render(<MyPage />, document.getElementById('content'));
}Paso 6: ir asincrónico hasta el final
Convierta sus etiquetas de script de sync a async/defer para cargar los archivos JavaScript. Este es otro paso clave para garantizar una carga y una experiencia de renderización fluidas en la interfaz.
¡Eso es! Vuelva a cargar la página para ver el aumento en el rendimiento.
Medición de la mejora
Bien, hiciste todo ese trabajo y ahora quieres saber qué tan eficiente es tu sitio. Querrá comparar las mejoras.
El almacenamiento en caché de renderizado brilla en situaciones en las que tiene varias llamadas al servidor antes de saber qué renderizar. En páginas con muchos scripts, JavaScript puede llevar mucho tiempo analizar.
Puede medir el rendimiento de la carga en la pestaña Rendimiento en DevTools de Chrome.
Medición de la representación en la pestaña Rendimiento de DevTools de Chrome
Idealmente, usaría un perfil de invitado para que las extensiones de su navegador no interfieran con las medidas. Debería ver una mejora significativa en la recarga. En la captura de pantalla anterior, tenemos una aplicación de muestra con un async data.json recuperar la llamada que se realiza antes de llamar ReactDOM.hydrate. Con Render Caching, el render se completa incluso antes de que se carguen los datos.
Terminando
Render Caching es una técnica inteligente para garantizar que la velocidad percibida de las recuperaciones de la misma página web sea más rápida al agregar una capa de almacenamiento en caché al HTML final y mostrárselas al usuario. Los usuarios que visitan su sitio con frecuencia son los que más se beneficiarán.
Como puede ver, lo logramos con muy poco código y las ganancias de rendimiento que obtenemos a cambio son enormes. Pruebe esto en su sitio web y publique sus comentarios. Me encantaría saber si el rendimiento de su sitio ve los mismos aumentos significativos que yo he experimentado.