¡Hola, compañeros entusiastas de la web! ?

Antes de profundizar, quería informarles que este artículo es una serie de artículos de introducción sobre los patrones de representación en mi portafolio. Si tienes curiosidad, puedes consultar la versión completa y conversacional en mi sitio web. Está escrito como una conversación divertida, lo que hace que sea muy fácil de seguir. ¡Pero por ahora, mantengámoslo simple y directo aquí en dev.to!

¡Ahora hablemos de los patrones de representación web!

¿Qué son los patrones de representación web?

Imagina que estás construyendo una casa. Tienes diferentes formas de construirlo, ¿verdad? Algunos métodos son rápidos, otros son sofisticados y algunos son una combinación de ambos. Los patrones de representación web son más o menos así, pero para sitios web.

Son diferentes formas de construir y mostrar páginas web. Cada método tiene sus propios puntos buenos y no tan buenos. Conocer estos patrones te ayudará a elegir la mejor manera de crear tu sitio web.

¿Por qué debería importarle?

Comprender estos patrones es importante porque afectan:

1. Qué tan rápido carga tu sitio web
2. Qué suave se siente al usarlo
3. Qué tan bien los motores de búsqueda pueden encontrar su sitio
4. Qué fácil es actualizar tu sitio

Los principales patrones de renderizado

Estos son los patrones principales que veremos:

Sitios estáticos

Aplicaciones de varias páginas (MPA)

Representación del lado del cliente (CSR)

Renderizado del lado del servidor (SSR)

Generación de sitios estáticos (SSG)

Regeneración estática incremental (ISR)

Hidratación

Hidratación progresiva

Transmisión de renderizado del lado del servidor

Arquitectura de la isla

Componentes del servidor

Algunos términos importantes

Antes de continuar, aprendamos algunas palabras clave:

• Tiempo hasta el primer byte (TTFB): qué tan rápido el servidor comienza a enviar datos
• Tiempo de interacción (TTI): Cuándo puede comenzar a utilizar el sitio web
• Primera pintura con contenido (FCP): cuando ves algo por primera vez en la página
• Pintura con contenido más grande (LCP): cuando aparece la mayor parte de la página
• Pre-renderizado: Creación de páginas web con anticipación
• Meta Frameworks: herramientas especiales que facilitan la creación de sitios web
• Representación isomorfa: una forma de hacer que los sitios web sean rápidos e interactivos al mismo tiempo

Concluyendo

Comprender estos patrones es muy útil si quieres crear sitios web fantásticos. Cada patrón tiene su propio uso y saber cuándo usarlos puede mejorar mucho tus sitios web.

Este es solo el comienzo de nuestro viaje hacia los patrones de renderizado. Si desea obtener más información sobre cada patrón, con ejemplos y cómo usarlos, consulte mi guía completa en el sitio de mi portafolio.

Recuerde, la clave no es solo conocer estos patrones, sino comprender cuándo usarlos. ¡Feliz creación de sitios web! ?

Si encuentra algún error o tiene sugerencias para mejorar, ¡hágamelo saber! Tus comentarios son valiosos para mejorar aún más este contenido.