Patrones Avanzados de Renderizado de Sitios en Jamstack

Rate this content
Bookmark

En esta sesión, repasaré estos patrones (Sharding, ISR, DPR, DSG) y mostraré a nuestros espectadores y a más de 2 millones de desarrolladores de Jamstack cómo aprovecharlos para construir sitios grandes sin la carga de tiempos de construcción prolongados.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

JAMstack es una arquitectura de desarrollo web que preconstruye el sitio antes de su publicación, lo que permite que el contenido esté disponible inmediatamente cuando los usuarios acceden al sitio, eliminando los tiempos de carga y mejorando la experiencia del usuario.

Los beneficios de usar JAMstack incluyen una mayor velocidad de carga de las páginas, mejor SEO debido a la disponibilidad inmediata del contenido para los motores de búsqueda, y mayor seguridad al implementar contenido en una CDN sin tener que gestionar servidores y bases de datos directamente.

A medida que un sitio JAMstack crece, el tiempo de compilación puede aumentar significativamente debido a que cada página necesita ser pregenerada durante la construcción. Esto puede resultar en tiempos de espera prolongados antes de que el sitio pueda ser actualizado o desplegado.

Para manejar grandes sitios en JAMstack, se pueden utilizar técnicas como la compilación incremental, que permite generar solo las páginas nuevas o modificadas en lugar de reconstruir todo el sitio, y la creación de micrositios, que divide el sitio en partes más pequeñas y manejables.

La ISR permite generar solo una parte de las páginas durante la compilación inicial y generar el resto bajo demanda cuando los usuarios las soliciten. Esto reduce el tiempo de compilación inicial y mejora la capacidad de respuesta del sitio sin regenerar todo el contenido.

El renderizado persistente distribuido es una técnica que elimina la necesidad de revalidación y purga de caché con cada nueva implementación, permitiendo que el contenido crítico esté siempre disponible mientras que el contenido restante se genera bajo demanda utilizando funciones serverless.

Ekene Eze
Ekene Eze
23 min
21 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy discute los patrones avanzados de renderizado de sitios en JAMstack, incluyendo los beneficios y desafíos de utilizar este enfoque. Explora soluciones como construcciones incrementales, micrositios y regeneración estática incremental para mejorar los tiempos de construcción y el rendimiento. La charla también presenta el renderizado persistente distribuido y Gatsby v4 como nuevas soluciones para mejorar la generación de sitios estáticos y el renderizado en el lado del servidor.

1. Introducción a los Patrones de Renderizado en JAMstack

Short description:

Hola. Hoy hablaré sobre los patrones avanzados de renderizado de sitios en JAMstack. Aprenderás cómo funciona el renderizado, los pros y contras de los patrones de renderizado y cómo mejorar el rendimiento. La construcción en JAMstack resuelve el problema de los tiempos de carga lentos al procesar las solicitudes en tiempo de compilación. Sin embargo, hay compensaciones a considerar.

hablaré sobre los patrones avanzados de renderizado de sitios en JAMstack. Bueno, llegaré a mi introducción en un minuto. Sí, trabajo como ingeniero de experiencia de desarrollo en Netlify y tengo un canal de YouTube donde hago tutoriales en video sobre desarrollo web. Si quieres seguirme en las redes sociales, estoy en Twitter, en Ekene underscore IO. Vamos a ello. Vale, aún no vamos a ello porque también me gustaría decirte que además de ser ingeniero de experiencia de desarrollo y hacer mi cosa en YouTube y aprender JavaScript y trabajar con él, lo que realmente quiero hacer es ser un mixólogo para poder emborrachar a todos mis amigos sin motivo alguno. Esa es probablemente una historia para otro momento. Pero eventualmente, llegaré a contar la historia. Y espero que todos estén aquí para escucharla cuando eso suceda. Pero seguiré adelante y comenzaré hoy. Entonces, lo que aprenderás hoy es cómo funciona el renderizado en JAMstack. Si has estado construyendo aplicaciones JAMstack con Knox o con cualquier otro framework, en tu generador de sitios estáticos, entenderás mejor cómo funciona el renderizado. También entenderás los pros y contras de algunos de los patrones de renderizado que tenemos, lo que aportan y las compensaciones que también tienen. Por último, también aprenderás qué hacer cuando tu sitio JAMstack tiene un rendimiento deficiente. Por ejemplo, si tarda mucho en compilarse, entenderás por qué sucede eso y las cosas que puedes hacer para acelerar ese proceso. Pero antes de sumergirnos en ello, hagamos un viaje al pasado para entender por qué esto es importante en primer lugar. Muy bien. Hasta ahora, lo que sucede es que cuando un usuario llega a tu sitio y solicita productos. Y en este caso, me refiero a cuando un usuario llega a tu sitio web y hace clic en productos, idealmente lo que sucede es que se envía una solicitud a tu servidor y dependiendo de la arquitectura de tu servidor y cómo está configurado. Esta solicitud podría pasar por tus balanceadores de carga, tus servidores web, tus servidores de aplicaciones y bases de datos y todas esas cosas que suceden detrás de escena para atender esa solicitud. Idealmente, esto se envía, tu servidor procesa la solicitud, produce el contenido correcto y lo envía de vuelta al usuario. Mientras todo eso sucede detrás de escena, por supuesto, tu usuario verá una pantalla en blanco o una pantalla de carga o un spinner, dependiendo de cómo hayas construido tu sitio. Esto no es muy bueno para el desarrollador y tampoco es muy bueno para el usuario que utiliza la aplicación porque tienen que quedarse en una pantalla en blanco o una pantalla de carga durante un tiempo antes de que se sirva el contenido real. Pero construir de la manera de JAMstack nos ayuda a resolver ese problema, y lo resuelve de esta manera, ¿verdad? Todo ese procesamiento ocurre antes de que el sitio se publique. Por ejemplo, si has construido tu aplicación JAMstack, una vez que ejecutas el comando de compilación, lo que sucede es que el generador de sitios estáticos se encarga de hacer todas las solicitudes en tu nombre, ¿verdad? Y genera todas las páginas, genera todas las rutas dinámicas y todas las partes que estarán disponibles en tu aplicación. Y luego el contenido se sirve a tus usuarios. Entonces, lo que sucede ahora es que en lugar de que los usuarios lleguen a tu sitio y hagan clic en botones para hacer solicitudes, todas esas solicitudes se realizan en tiempo de compilación para que cuando tus usuarios lleguen al sitio, todo el contenido que necesitan esté disponible de inmediato. Entonces no hay retrasos, no hay tiempo de espera, no hay giros de carga que duren para siempre. Entonces, esta es una buena manera, pero como puedes imaginar, como toda solución, como en todas partes que

2. Beneficios de JAMstack

Short description:

Los beneficios de utilizar el enfoque JAMstack incluyen una velocidad de sitio más rápida, una mejor experiencia de usuario, una mejor optimización para motores de búsqueda y una mayor seguridad mediante la implementación de CDN. Los desarrolladores pueden centrarse en sus habilidades principales sin preocuparse por la infraestructura.

La tecnología viene con una solución, también tiene algunas compensaciones. Pero antes de hablar sobre las compensaciones, los beneficios que obtenemos al utilizar el enfoque JAMstack son que tu sitio es más rápido y tus usuarios están contentos. ¿Verdad? Si nunca tienes que esperar en pantallas de carga para obtener contenido, o si visitas un sitio y ves que es rápido, si haces clic en un botón y todo sucede como debería sin retrasos, tus usuarios estarán contentos. Como usuario, yo estaría contento, ¿verdad? Y también obtienes un mejor SEO de manera predeterminada, ya que como desarrollador o propietario del sitio, todo el contenido de tu sitio está disponible de inmediato. Entonces, Google y todos los motores de búsqueda estarán contentos. Pueden rastrear e indexar tu sitio correctamente porque todo el contenido está disponible con anticipación. Y también, implementar en la CDN significa que tienes un punto de ataque limitado. Por lo tanto, es más seguro porque solo tienes que preocuparte por tu sitio y la CDN. No tienes que preocuparte por asegurar tus bases de datos, tus balanceadores de carga, tus servidores web y todas esas cosas, solo tienes que preocuparte por tu propia aplicación y la CDN se encarga del resto por ti. Construir de esta manera también permite a los desarrolladores mantenerse dentro de sus habilidades principales. Me refiero a mí mismo como un desarrollador de front-end. Me gusta construir con Vue.js y Nox.js. Nunca quiero tener que preocuparme por cómo funcionan los balanceadores de carga o los contenedores o Docker, ¿verdad? Y construir de esta manera me ayuda a mantenerme dentro de mi conjunto de habilidades y no preocuparme por esas cosas que no conozco.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
Una Saga de Problemas de Renderizado Web
Vue.js London 2023Vue.js London 2023
28 min
Una Saga de Problemas de Renderizado Web
This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.
Cómo localizar y personalizar contenido con Sanity.io y Next.js
React Advanced 2021React Advanced 2021
8 min
Cómo localizar y personalizar contenido con Sanity.io y Next.js
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
Manteniéndolo Simple
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Manteniéndolo Simple
React brought simplicity to building browser-based applications, but as new concepts like context, hooks, server components, and streaming are introduced, it's important to know the current state of the application. The JAMstack simplifies reasoning about the state of web properties through immutable assets and atomic deploys. However, as the JAMstack evolves, challenges arise in areas such as build times and API caching for large projects, especially e-commerce.
Desarrollo API-first con WordPress sin cabeza
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Desarrollo API-first con WordPress sin cabeza
This Talk discusses API-first development with headless WordPress, highlighting its benefits and the availability of resources. It explores the use of plugins and frameworks like WPGraphQL and the headless framework from WP Engine to create custom post types and make GraphQL calls. The Talk also covers building websites, querying and caching data, deploying apps with the Atlas platform, and improving user experience. It touches on authentication, efficiency, backend resources, and WooCommerce integration in headless WordPress, as well as WordPress accessibility and SEO optimization.
Regeneración Estática Incremental: Sitios Estáticos Potenciados
React Advanced 2021React Advanced 2021
22 min
Regeneración Estática Incremental: Sitios Estáticos Potenciados
Incremental static regeneration is a feature in Next.js that allows for static generation on a per-page basis without rebuilding the entire site. It helps with headless content management systems and persists between deployments. The example demonstrates how server-side rendering, static site generation, and incremental static regeneration work together. The real-time visual editor allows for immediate changes to be seen. Visit the NetJS website for an e-commerce demo and learning platform.

Workshops on related topic

Curso intensivo sobre Jamstack con Next.js y Storyblok
React Day Berlin 2022React Day Berlin 2022
161 min
Curso intensivo sobre Jamstack con Next.js y Storyblok
WorkshopFree
Arisa Fukuzaki
Chakit Arora
2 authors
Es posible que ya hayas leído sobre Jamstack. Probablemente ya hayas utilizado Next.js y recientemente hayas escuchado mucho sobre los CMS sin cabeza. Este curso rápido pondrá todas las piezas juntas y te mostrará por qué Storyblok, combinado con Next.js, es la mejor combinación para tu próximo proyecto. ¡Ven y pruébalo tú mismo!
- Conocimiento profundo de Jamstack. Cómo ha cambiado desde los tiempos antiguos hasta el mundo moderno. Aprende cómo se creó Jamstack comparando los sitios estáticos y los sitios dinámicos.- Cómo Next.js sirve contenido y cómo se sirve el contenido con la generación de sitios estáticos (SSG).- Metodología de diseño atómico y cómo se aplica al sistema de gestión de contenido.- Experiencia práctica en proyectos construyendo un proyecto Jamstack con Next.js y Storyblok.
Requisitos previos- Cualquier editor de texto. Se recomienda Visual Studio Code- Node.js LTS- NPM o Yarn- Cuenta de GitHub- Cuenta de Vercel- Familiaridad con JavaScript, React y Git. Haber trabajado con Next.js antes es una ventaja
Lo que se incluye1. Introducción y descripción general del curso2. Introducción a Jamstack3. Introducción al diseño atómico4. Descripción general de los CMS sin cabeza5. Introducción a Storyblok6. Creación de una aplicación Next.js7. Creación de un espacio Storyblok8. Conexión de Next.js y Storyblok9. Creación de componentes personalizados10. Creación de la primera página11. Introducción a Visual12. Adición de páginas dinámicas13. Creación de la sección de blogs14. Implementación en Vercel
Comercio electrónico en el Jamstack con NextJS y Netlify
React Summit Remote Edition 2021React Summit Remote Edition 2021
120 min
Comercio electrónico en el Jamstack con NextJS y Netlify
Workshop
Nick DeJesus
Nick DeJesus
Los frameworks de Jamstack están cambiando la forma en que construimos experiencias de primera línea en la web. Son eficientes, seguros y permiten a los desarrolladores construir aplicaciones web más rápido que antes. En esta masterclass, Nick DeJesus te guiará en la construcción de un sitio de comercio electrónico utilizando NextJS, use-shopping-cart y theme-ui. Aprenderás cómo utilizar funciones sin servidor con Netlify para realizar transacciones seguras y cómo construir componentes de interfaz de usuario accesibles que amplíen las capacidades de use-shopping-cart.
Masterclass de comercio electrónico JAMstack
JSNation Live 2021JSNation Live 2021
199 min
Masterclass de comercio electrónico JAMstack
Workshop
Bolaji Ayodeji
Bolaji Ayodeji
El comercio digital ha cambiado y hay una creciente demanda de soluciones más rápidas y eficientes. En esta masterclass, aprenderás sobre la evolución del comercio electrónico y cómo JAMstack y el comercio sin cabeza mejoran las experiencias de compra en la web. Exploraremos los conceptos básicos del comercio sin cabeza construyendo una página de productos mínima de comercio electrónico JAMstack con contenido estático, HTML5, CSS y Javascript. Finalmente, integraremos Commerce Layer para capacidades de comercio sin cabeza y desplegaremos nuestra aplicación en Netlify.