Me hubiera gustado haber visto esta explicación hace mucho tiempo. En su momento me costó mucho trabajo comprender el SSR, es muy complicado de encontrar alguien que lo entienda y pueda explicarlo de una manera tan sencilla.
Entendiendo el rendimiento
Todo lo que aprenderás sobre optimización web
¿Vale el esfuerzo optimizar un sitio web?
¿Cuándo realmente un sitio es rápido o lento?
Antes de optimizar...
Aprendiendo a medir
User Performance Metrics
Nuestro proyecto
Crítical Rendering Path
Etapas de render del navegador
Network waterfall y recursos que bloquean el navegador
Priorización de recursos
Preloading y prefetching de recursos
Fases Paint y Layout del Critical Render Path
CSS
Detectando Paints costosos y optimizando animaciones
Bloqueos y complejidad en selectores
WebFonts
WebFonts y su impacto en rendimiento
Imágenes, Iconos y SVG
Imágenes, formato y compresión
Imágenes y compresión
¿WebFont, Imagen o SVG?
Técnicas avanzadas con Lazy Loading
Técnicas avanzadas con Responsive Loading
Aplicaciones JavaScript
JavaScript y aplicaciones modernas y Utilizando un servidor de producción
Analizando el bundle de la aplicación
Reduciendo el tamaño del bundle
Code Splitting
Lazy Module Loading
Llevando los listeners a otro nivel
Instalando Modal video
Lazy loading del modal
Moviendo la carga de rendering hacia el servidor: Server Side Rendering
Aplicando SSR
Pre-renderizando el contenido: Static Generation
Caché
Cómo funciona el Caché de recursos y CDN
Deploy en Netlify y automatización de contenido en GitHub Actions
Aplicando Github Actions
Interceptando los requests del navegador con Service Workers
Performance Budget
Performance budget y auditorias automatizadas
Automatizando una auditoría con Lighthouse CI
Medidas reales y monitoreo constante
Conclusiones
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Moviendo la carga de rendering hacia el servidor: Server Side Rendering
28/38Recursos
Aportes 6
Preguntas 0
Ordenar por:
🚚 Moviendo la carga de rendering hacia el servidor: Server Side Rendering
<h4>Ideas/conceptos claves</h4>Client Side Rendering es que toda la carga suceda en el navegador y en el cliente
<h4>Apuntes</h4>- Client-Side Rendering tiene la característica que
- No se mostrará nada hasta que el navegador haya descargado y ejecutado el JS
Client Side Rendering
- Tenemos un navegador y un servidor
- Cada vez que entramos a un sitio web el servidor responde un archivo JS
- La página comienza a renderizar HTML a partir del JS recibido
- Todo nuestro contenido principal sucede dentro del cliente [Navegador o Browser]
Server Side Rendering
- Nuestra página se conecta al servidor, pero este le envía un HTML ya renderizado, es decir que se salta el proceso de esperar el JS para mostrar el contenido
- El JS seguirá siendo usado, pero lo separaremos para la interactividad
RESUMEN: Server Side Rendering es una estrategia de enviar “ya comido” nuestra aplicación a nivel HTML es decir que no sera necesario esperar el JS para mostrar contenido
Si ahora el render se hace del lado de server.
No se generan unos problemas porque ya no se sabe el tamaño de la pantalla del cliente, supongo que una vez que llega al cliente debe aplicar otro render? para que se ajuste al browser del cliente?
Es muy interesante este tema, y muy buena observación por parte de Omar Alvarez, lo cual me surge una duda, es muy costoso el proceso para el servidor (tomando como ejemplo el proyecto) ?
Para considerar cuando uno renta servidores como los de amazon que te cobran por procesamiento… aumentaría un poco claro y dependiendo de cada plataforma pero aterrizandolo en este proyecto que es una llamada a la api (Mucho, poco, algo considerable, practicamente nada) … Muchas gracias 😄
Me gustaba ver el temario como se veia antes. Ahora tengo que hacer un scroll infinito para poder cerrar la pestania de Temario y ademas no hay como ir a la pagina principal del temario …
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?