#CSR, #SSR y #SSG: qué son y cuándo usarlos

Summary

El video discute las diferencias entre Client Side Rendering (CSR), Server Side Rendering (SSR) y Static Site Generation (SSG). Explicó los problemas de CSR como la lenta carga de páginas en blanco y las dificultades con SEO. Presentó SSR como una solución para mejorar la experiencia de usuario y SEO, aunque requiere una conexión al servidor y puede tener problemas con ciertas librerías. Finalmente, SSG se describe como ideal para contenido estático, permitiendo una carga rápida y efectiva sin un servidor en ejecución.

Takeaways

• 🌟 El Client Side Rendering (CSR) envía una página en blanco al navegador, que luego descarga y ejecuta un bundle de JavaScript para renderizar la aplicación.
• 🚀 Los SPAs (Single Page Applications) utilizan un router para manipular el DOM y mostrar diferentes componentes sin recargar la página completa.
• 💡 Las APIs del navegador, como local storage y document, no están disponibles fuera del contexto del navegador, por lo que pueden causar errores en un entorno de server-side rendering.
• 🔍 El CSR puede tener problemas con el SEO ya que los crawlers pueden no indexar correctamente una página que renderiza dinámicamente su contenido.
• 🎯 Server Side Rendering (SSR) prerenderiza la página en el servidor y envía el HTML al cliente, mejorando la experiencia de usuario y la indexación por parte de los motores de búsqueda.
• 📦 Static Site Generation (SSG) ocurre en tiempo de construcción, prerenderizando toda la aplicación en HTML estatico y mejorando la velocidad de carga y el SEO.
• 🔄 La hidratación (hydration) en SSR permite reutilizar los nodos HTML ya presentes en la página para agregar interactividad sin tener que volver a renderizarlos completamente.
• 🔧 La resumabilidad (resumability) es un enfoque que combina SSR y CSR, enviando una cantidad mínima de JavaScript para hacer la página interactiva y luego descargando el resto en paralelo.
• 🛠️ La selección de la estrategia de rendering (CSR, SSR o SSG) depende del contexto del proyecto, como la necesidad de SEO, la interacción del usuario y la frecuencia de cambios en el contenido.
• 🔑 Es importante entender en qué plataforma se están ejecutando las APIs y hacer workarounds adecuados para evitar errores al utilizar APIs propias del cliente en un entorno de servidor.
• 🌐 Frameworks como Astro permiten combinar SSR y SSG, ofreciendo flexibilidad para renderizar parte de la aplicación en el servidor y parte en el cliente según sea necesario.

Q & A

¿Qué es el Server Side Rendering (SSR) y por qué es importante?

El Server Side Rendering es una técnica en la que los componentes y nodos HTML son generados en el servidor en lugar del cliente. Es importante porque mejora la experiencia del usuario al evitar la renderización inicial en blanco y también beneficia el SEO al proporcionar contenido estático que los crawlers pueden indexar fácilmente.

¿Qué es el Client Side Rendering (CSR) y cómo funciona?

El Client Side Rendering es un método de renderización donde el navegador recibe una página en blanco y luego descarga un bundle de JavaScript que se encarga de crear el árbol y nodos del DOM necesarios para renderizar la aplicación. Funciona en aplicaciones como SPAs (Single Page Applications) donde la navegación entre páginas no implica una recarga completa de la página.

¿Qué es la Static Site Generation (SSG) y cómo se diferencia del SSR y CSR?

La Static Site Generation es una técnica donde la aplicación web se construye completamente en tiempo de construcción, generando archivos estáticos que no requieren un servidor en ejecución para ser servidos. Se diferencia del SSR en que no hay un servidor procesando solicitudes en tiempo real, y del CSR en que no hay renderización en el lado del cliente, ya que todo está pre-renderizado y estático.

¿Qué problemas pueden surgir con el uso de SSR y cómo pueden solucionarse?

El uso de SSR puede traer problemas como la duplicación de renderización y la incompatibilidad con algunas librerías o APIs del cliente. Estos problemas pueden solucionarse utilizando técnicas como la hidratación selectiva, que permite reutilizar nodos HTML ya presentes en el cliente, y workarounds para las librerías que dependen de objetos del navegador.

¿Qué es la hidratación selectiva y cómo funciona?

La hidratación selectiva es una técnica que permite reutilizar nodos HTML ya presentes en el cliente al momento de la renderización. Funciona identificando nodos con la misma estructura en el servidor y en el cliente, permitiendo que el JavaScript se centre en reemplazar o mejorar sólo los nodos necesarios, mejorando así la eficiencia y la experiencia del usuario.

¿Qué ventajas aporta el uso de la Static Site Generation?

Las ventajas de la Static Site Generation incluyen una mayor rapidez ya que solo se descargan archivos estáticos como HTML y CSS, mejor SEO debido a la presencia de metadatos estáticos, y la reducción de peticiones adicionales al servidor ya que los datos son incluidos en la página desde la construcción.

¿Cuáles son las desventajas del Client Side Rendering?

Las desventajas del Client Side Rendering incluyen la posible lenta inicial debido al tiempo necesario para descargar el bundle de JavaScript, problemas de SEO ya que los crawlers pueden tener dificultades indexando contenido generado dinámicamente, y la dependencia de las APIs del navegador que no están disponibles en un entorno de servidor.

¿Qué es la 'Island' en el contexto de Astro y cómo funciona?

En Astro, una 'Island' se refiere a cualquier componente de interfaz de usuario interactivo en la página. Funcionan renderizando páginas HTML en el servidor e inyectando placeholders o slots alrededor de regiones altamente dinámicas que luego pueden ser hidratadas en el cliente como pequeños widgets o contenidos reutilizables, aprovechando su HTML inicial renderizado en el servidor.

¿Cuáles son los casos de uso ideales para cada técnica de renderización?

El Client Side Rendering es ideal para sistemas internos y aplicaciones que no requieren posicionamiento en buscadores. El Server Side Rendering es adecuado para aplicaciones públicas donde el SEO es importante y se benefician de la renderización inicial de contenido estático. La Static Site Generation es perfecta para sitios de contenido estático como blogs o portfolios, donde no se requiere interacción dinámica y se desea una construcción rápida y eficiente.

¿Cómo se puede implementar la hidratación selectiva en React?

En React, la hidratación selectiva se puede implementar utilizando el concepto de Suspense. Esto permite hidratar ciertas partes de la página para que la web cargue estáticos por un lado y componentes interactivos por otro, sin tener que esperar a que se hidrate todo el árbol del DOM.

¿Qué es la 'resumabilidad' en el contexto de la renderización web?

La 'resumabilidad' se refiere a la capacidad de una aplicación web de ser interactiva de una manera rápida y eficiente después de su carga inicial. Implica la eliminación de la duplicación en el proceso de renderización y la descarga en paralelo de partes de JavaScript que no incluyen renderización de nodos, permitiendo que la web sea interactiva mucho antes y de una manera más performante.