En este artículo intentaré analizar con más detalle la cuestión de la RSS y la RSE , que ya he tratado anteriormente . Explicaré los métodos de renderizado en un artículo.

En este artículo, revisaré el artículo Rendering on Web de Jason Miller y Addy Osmani e intentaré explicar este tema.

El artículo se basa en mi artículo ¿Dónde se debe realizar la representación HTML? que escribí hace un tiempo. Comienza con la pregunta de la publicación del blog.

Al desarrollar un sitio web, existe la posibilidad de realizar la lógica y la renderización en diferentes lugares. ¿Cómo decidirán los desarrolladores qué enfoque preferir cuando existen diferentes métodos de desarrollo de una página web?

Para tomar esta decisión, los desarrolladores deben tener una buena comprensión de los métodos de renderizado y las compensaciones de rendimiento resultantes.

A.Renderizado

Si te preguntas cuál es el tema de renderizado. Puedes leer los detalles en la entrada del blog donde expliqué este tema
.

B. Web estática vs. dinámica

Otra cosa a entender es la diferencia entre Web estática y Web dinámica . Las páginas web estáticas son páginas que no vuelven al servidor y realizan peticiones con AJAX después de recuperar la página del servidor (HTML, CSS, JS), su contenido no cambia según el usuario o no contiene datos dinámicos (tipo de cambio, clima, etc.) debido al cambio de datos en él. Por ejemplo, blogs, noticias, etc. Por el contrario, las páginas dinámicas son páginas web que requieren de AJAX, API, Base de Datos, etc. donde el contenido de la página cambia de acuerdo al intervalo de tiempo y parámetros llamados.

C. Condiciones de ejecución

• TTFB (Tiempo hasta el primer byte) El tiempo entre hacer clic en el enlace y recibir el primer fragmento de contenido.
• FP (First Paint) El tiempo que tarda en mostrarse el primer píxel al usuario.
• FCP (First Contentful Paint) El momento de mostrar el primer contenido lógico en la solicitud.
• TTI Tiempo de interacción El momento en que la página está lista para la interacción con el usuario (conexión de todos los eventos)

• SSR (Server Side Rendering): este es el método en el que el proceso de renderizado se realiza en el lado del servidor y las páginas dinámicas se producen recuperándolas de la base de datos utilizando métodos como ASP.Net, JSP, PHP. Aquí, dado que JS tendrá un papel mucho menor en la creación de la pantalla, FP y FCP serán muy rápidos, mientras que el tiempo que tardan los datos en llegar desde el servidor será mayor en TTFB .
• CSR (Client Side Rendering): este es el método en el que la representación se realiza en el lado del navegador con métodos como Angular, React, Vue, Svelte, las páginas dinámicas se extraen con AJAX y las pantallas se crean en la pantalla combinando Plantilla + Datos con el método de representación de plantilla. En este método, incluso si ejecutamos TTFB y FP más rápido, no podemos acelerar el TTI, es decir, el tiempo que tarda el usuario en interactuar con la página web relevante.
• Renderizado estático: en este método utilizado para páginas estáticas, dado que las páginas cambian muy poco y no hay necesidad de una base de datos, las páginas se llevan a su estado final con el método de pre-renderizado antes de ser enviadas al servidor y se envían a CDN, o entornos de almacenamiento en caché de borde, y se sirven muy rápidamente desde allí. Recientemente, se ha vuelto mucho más fácil producir este tipo de páginas con las herramientas Gatsby y Jekyll. En estas páginas, los tiempos TTFB y TTI son bastante cortos. Las necesidades de ejecución o interacción de JS de dichas páginas son muy bajas y limitadas.
• Representación híbrida: si bien tiene sentido crear SSR para algunas de las páginas según su carga de contenido, tiene sentido crear algunas de las páginas de alta carga con CSR diferido. Han surgido frameworks como Next, Nuxt, Nest, Sapper que dan soporte a estas situaciones. Este marco tiene capacidades similares al adoptar el método de desarrollo de componentes Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte en el desarrollo de código.

Referencias

• Renderizado en la Web
• Diferencia entre páginas web estáticas y dinámicas
• ¿Dónde debe realizarse la representación HTML?

Puede hacer clic en este enlace para acceder a la continuación de este artículo u otros artículos del grupo de artículos .