Qué buen curso hasta el momento 👏. Me ha encantado esta sección de JavaScript sobre todo la explicación del code splitting, SSR, y prerendering. Creo que explicas muy bien y me gustaría que hicieras un curso más a fondo con esos temas! 😍🚀
Entendiendo el rendimiento
Optimización Web Avanzada con JavaScript y CSS
Optimización de Velocidad en Páginas Web: Impacto y Conversión
Optimización del Rendimiento Web con RAIL de Google
Antes de optimizar...
Medición de Performance Web con Chrome DevTools y RAIL
Métricas Web: LCP, FID y CLS para Mejorar Experiencia Usuario
Clonación y configuración de proyectos en Git y npm
Crítical Rendering Path
Proceso de Critical Rendering Path en Navegadores Web
Optimización de Carga de JavaScript y su Impacto en el Rendimiento
Priorización de Recursos CSS para Mejora de Carga en Navegadores
Optimización Web: Uso de Preload, Prefetch y Preconnect
Renderizado Eficiente: Optimización de CSS y JavaScript
CSS
Optimización de Animaciones CSS para Mejorar el Rendimiento
Optimización de Selectores CSS y Carga de Imágenes en Proyectos Web
WebFonts
Optimización de WebFonts para Mejorar el Rendimiento Web
Imágenes, Iconos y SVG
Optimización de Imágenes para Web: Formatos y Herramientas Avanzadas
Optimización de Imágenes para Web: Formatos y Resoluciones
Vectorización de Imágenes: Comparación entre SVG y WebFonts
Lazy Loading: Técnicas y Estrategias Aplicadas
Carga de Imágenes Responsivas con Gatsby y Picture Element
Aplicaciones JavaScript
Optimización de JavaScript para Producción en Webpack
Análisis y Optimización de Bundles con Webpack
Optimización de Bundles en JavaScript con Tree Shaking
Estrategias de Code Splitting con Webpack
Carga Diferida de JavaScript para Modales Interactivos
Técnicas de Propagación de Eventos en JavaScript
Integración de librería Modal Video con Webpack y CSS
Lazy Loading y Optimización en Webpack
Diferencias entre Client-Side y Server-Side Rendering
Optimización de Server Side Rendering con Node.js
Optimización de Sitios Web con Static Site Generation
Caché
Funcionamiento del Caché y CDNs en la Optimización Web
Alojamiento de Sitios Web Estáticos con Netlify y GitHub
Automatización de despliegues con GitHub Actions y Netlify
Implementación de Service Workers para Caché Avanzado
Performance Budget
Auditoría de Performance Web con Lighthouse y GitHub Actions
Automatización de Auditorías con Github Actions y LighthouseCI
Optimización de Sitios Web con Datos de Usuarios Reales
Conclusiones
Optimización de Imágenes y CSS para Mejorar la Velocidad Web
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
El Server-Side Rendering (SSR) es un proceso en el que el servidor genera todas las páginas web para cada solicitud del usuario. Cada vez que un usuario se conecta, el servidor procesa la solicitud y obtiene la información de una API. Esto significa que por cada nueva conexión, se realiza un llamado a las API que estamos utilizando. Si dos usuarios se conectan, se hacen dos solicitudes; si son cien conexiones, se realizan cien solicitudes. Este modelo plantea un desafío potencial de escalabilidad y eficiencia en proyectos donde la información no cambia tan frecuentemente, como una lista de animes más populares.
El Static Site Generation (SSG) se presenta como una alternativa eficiente al SSR cuando la información de un sitio no cambia frecuentemente. En lugar de regenerar las páginas con cada solicitud, el SSG procesa todo una sola vez durante la etapa de construcción del proyecto, almacenando el contenido en el servidor para luego distribuir la misma respuesta a todas las conexiones. Esto reduce la carga del servidor y las solicitudes a la API.
Pasar de SSR a SSG en un proyecto implica ciertos cambios clave en la estructura y el flujo del proceso. A continuación, algunos pasos básicos para implementar SSG:
En el ejemplo del curso, se hace uso de la librería HyperScript para ayudar en la generación del HTML estático. Además, el script export.js
facilita la creación del archivo index.html
con todos los componentes renderizados. El uso de JavaScript junto con las APIs nos permite estructurar nuestro sitio bajo el popular enfoque JAMStack, que privilegia los rendimientos y la escala.
// Ejemplo básico de cómo usar JavaScript para generar HTML estático
// Se reutiliza la función render previamente utilizada en SSR
const render = require('./render');
const createStaticSite = () => {
const htmlContent = render(); // Obtener el contenido completo con render
saveToFile('index.html', htmlContent); // Guardar el HTML generado en un archivo
};
const saveToFile = (filename, content) => {
// Función para escribir el contenido en un archivo
fs.writeFileSync(filename, content);
};
createStaticSite(); // Ejecutar la creación del sitio estático
El SSG trae consigo numerosos beneficios, especialmente en términos de rendimiento:
Estos beneficios facilitan que los desarrolladores creen sitios altamente optimizados, aunque no todas las aplicaciones son adecuadas para el SSG. Entornos como dashboards de datos en tiempo real o analíticas dependen de información dinámica actualizada constantemente y no son candidatos ideales para prerenderización.
Aunque el static site generation puede llevar una página al máximo nivel de optimización, siempre debe evaluarse la naturaleza y las necesidades del proyecto. Los desarrolladores deben analizar qué partes del sitio pueden beneficiarse de esta metodología y cuáles requieren permanecer dinámicas. Además, en futuras clases, se estudiarán aspectos como la implementación de cachés y redes de entrega de contenido (CDN) para mejorar aún más la eficiencia y rendimiento del sitio.
Aportes 10
Preguntas 1
Qué buen curso hasta el momento 👏. Me ha encantado esta sección de JavaScript sobre todo la explicación del code splitting, SSR, y prerendering. Creo que explicas muy bien y me gustaría que hicieras un curso más a fondo con esos temas! 😍🚀
Static Site Generators - Top Open Source SSGs | Jamstack
<h4>Apuntes</h4>RESUMEN: Static Site Generation nos renderiza y busca los datos una sola vez, pero nos da la ventaja de tener todo listo, pero solo se debe usar cuando los datos no cambien en tiempo real
JAMStack
J -> Javascript = interacción del sitio web
A -> Api’s = interfaz de aplicaciones para consultar información que ya es abstraida y ha realizado un proceso en un servidor
M -> Markup = plantilla construida en tiempo de compilación
Encontré este recurso que podría añadir un mejor entendimiento de SSR y SSG
Buenísima explicación.
Me basé en esta url para traspasar los cambios a mis avances:
https://github.com/jonalvarezz/platzi-optimizacion-web/compare/5-with-ssr...7-with-ssg
Luego
npm run build
npm run serve
Fui a localhost:5000 y funcionó impeque
Segun veo pre-renderizas el contenido, y esta bien. Pero cuando payload de la respuesta de la API cambia, como haces para actualizar el contenido para mostrar el nuevo contenido?
Cada vez que un usuario se conecta, hace una petición al servidor, esa petición va a traer la información de la API.
Server Side Rendering on Demand: Cada vez que hay una nueva conexión vamos a ir a las API a traer información.
👌
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?