#CSR

#CSR, #SSR y #SSG: qué son y cuándo usarlos
En este vídeo aprendemos qué es #CSR (client side rendering), #SSR (server side rendering) y #SSG (static site generation) y en qué escenarios podrías considerar aplicar cada uno.
Además, vemos implementaciones y referencias interesantes de su uso con #Angular, #React y #Astro como ejemplos de implementación de estas estrategias de rendering y pre-rendering.
También repasaremos conceptos como #hydration y cómo estos frameworks #JS lo usan para el pre-rendering a traves de, por ejemplo, selective hydration.
#programacionenespañol
Enlaces de interés
===============
Hydration en Angular: angular.dev/gu...
Suspense en React 18: github.com/rea...
Islas de Astro: docs.astro.bui...
Redes de la comunidad: programacion-e...
Conviértete en miembro de este canal para disfrutar de ventajas, sorteos exclusivos dentro de la comunidad y un badge con tu imagen de perfil en la web de Programación en español:
/ @programacion-es

[@luizarnoldchavezburgos3638]

Sigue así por favor. Sé que llegarás lejos. Mi recomendación sería que mejores tus títulos y miniaturas para que sean más "mainstream" pero tu contenido es 100% de calidad.

[@programacion-es]

Grandeeee, lo tendré en cuenta para futuros vídeos, un gran abrazo y que tengas buen código!

[@Anonimo01652]

@programacion-es que buen contenido Pedro, gracias por una explicación bastante detallada y con calidad.

[@programacion-es]

Mil gracias master!!

[@santosmarte]

Mejor no puede ser, mil millon de gracias !!!

[@programacion-es]

Muchísimas gracias a ti por el comentario!! Me alegra un montón que te haya gustado el vídeo, un saludo y que tengas buen código!!

[@ToniTerremoto]

Buen video y presentación, gracias

[@programacion-es]

Mil gracias!!!

[@KarlosMrez-e1s]

Gracias hermano. Subí de angular 16 a 17, y de repente el CLI me hacía la pregunta de si quería activar SSR y SSG. No tenía ni idea que era eso, pero tras ver tu vídeo me quedó todo mucho más claro.

[@programacion-es]

Esoooo, me alegra un montón que te haya sido útil!! Un saludo y que tengas buen código!!

[@tramadotlol]

Muuuy buen video, un genio!, lo explicaste de una muuuy buena manera, continua generando contenido de calidad y mucho valor :)

[@programacion-es]

Grandeeee, mil gracias por el comentario, me motiva a seguir creando contenido, un saludo y que tengas buen código!!

[@nelson3391]

Excelente contenido!. Muchas Gracias.

[@programacion-es]

Mil graciaaaas! Un saludo y que tengas buen código!

[@kevintipantiza9344]

Excelente explicación y buen contenido. Saludos

[@programacion-es]

Muchas gracias! Un saludo y que tengas buen código!

[@leninlima416]

Excelente explicación.

[@programacion-es]

Mil gracias!!

[@ronaldos3738]

buen video, gracias crack

[@programacion-es]

Gracias a ti por comentar!! Un saludo y que tengas buen código!

[@carloscedeira6434]

Gracias todo un fiera

[@programacion-es]

Grandeeee!

[@mirxtremapps]

tienes algún curso de Angular actualizado?? he retomado angular después de muchos años y veo conceptos nuevos y estoy perdido.

[@programacion-es]

Claro!! Te dejo aquí la playlist de Angular del canal Angular: kzbin.info/aero/PL8ztFHK8Pm3sTaYn98TKpwP_zaw0wjmMw

[@soran2290]

El ssr es como funciona PHP? 🤔

[@programacion-es]

Depende de cómo lo uses, pero si, puedes tener ssr con php =)

[@adanpalma4026]

Bueno soy backend y hay cosas que no comprendo pero he visto mucho que htmx syudaria en eliminar mucho js. Es cierto eso? Y si tu lo usarias se puede usar para hacer SSR?

[@programacion-es]

Si, de hecho tienen un apartado en su documentación al respecto htmx.org/server-examples/

[@dlcanegro753]

Tengo una duda con respecto a SSG, sabrias si al realizar nuevamente un build y deploy podria afectar al SEO?

[@programacion-es]

No debería afectarlo, el deploy es algo súper rápido y los bots no están pasando por la web cada segundo, generalmente pasan x veces a la semana para registrar cambios y mejorar la visión de los buscadores sobre tu web

[@dlcanegro753]

@@programacion-es gracias

[@ronaldalvarado3514]

Muchas gracias por el video, pero se puede haver una implementacion hibrida, que el login se carge directamente con ssr y cuando ingresemos internamente a la app se use csr en angular?

[@programacion-es]

Para autenticación con SSR podrías usar cookies, por ejemplo, te dejo una referencia que quizás te sea útil: garage.sekrab.com/posts/authentication-in-angular-part-v-handling-ssr

[@ronaldalvarado3514]

@@programacion-es En un futuro haras un video sobre como deployar una app en server side rendering con la version de angular 17?

[@programacion-es]

@@ronaldalvarado3514 si, se viene contenido usando ssr con Angular 17 😎🤘

[@carlcaravantsz1869]

La estrategia de renderizado se puede escoger por cada página web? o se escoge por todo el sitio web?, es decir, puedo yo tener ciertas páginas web con CSR y otras con SSR?

[@programacion-es]

Puedes elegir según te interese cargar partes de la web en el cliente, un buen ejemplo y bastante directo de ver son las islas de Astro =)

[@code1866]

Al tener una isla en astro la pagina dejaria de ser una SSG?

[@programacion-es]

No, justamente por eso es una isla, el resto de componentes/contenido se procesa y se pasa a estático, lo único que se mantendría para cargar en el lado del cliente sería esa isla.

[@davidprietoc]

@@programacion-es Es decir que si esa isla contiene cierta interacción del usuario que no se.. necesite hacer fetch a una API para consultar datos, sería el caso ideal no es así? Incluso pienso, podria ser un header con el login al sitio, algo que muchas veces se solía hacer con s a otro sitio privado digamos.

[@programacion-es]

@@davidprietoc Si, la isla te sirve para estos casos donde necesitas que el DOM cambie o se reaccione a interacción del usuario de formas donde la página estática no te lo permitiría o te lo complicaría =) El fetch lo puedes hacer sin una isla si buscas datos y ya, sin interacción adicional que amerite cosas como paginación, filtrado, etc. para esos casos, o usas un script de vanilla que se cargue en el cliente o usas una isla para facilitar toda esta interacción y cambios