Creación de sitios estáticos con Next.js y Jamstack

Curso de Next.js: Sitios Estáticos y Jamstack

Contenido del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

18
Despliegue de Next.js hacia Producción: Variables y Optimización
01:41 min

Bonus

19
Lectura de Archivos en Next.js con Node.js y File System
09:51 min

Cursos Empresas Blog Live Conf Eventos Precios

0:002:47

Creación de sitios estáticos con Next.js y Jamstack

Curso de Next.js: Sitios Estáticos y Jamstack

Clase 1 de 19

Clase 1 / 19

Obtén respuestas inmediatas¿Dudas?Profundiza lo que acabas de ver

Recursos

¿Qué aprenderás en el curso de sitios estáticos con Next.js?

Bienvenido al emocionante mundo de la construcción de sitios estáticos utilizando Next.js, el framework de React más popular de la actualidad. Este curso se enfoca en ofrecerte una experiencia de aprendizaje integral donde explotarás todo el potencial de Next.js en la generación de sitios estáticos mejorados. Bajo la guía de Jonathan Álvarez, explorarás paso a paso cómo conectar Next.js con GraphQL, utilizar TypeScript, y realizar la autogeneración de código, integrándolo todo con Contentful, un poderoso sistema de gestión de contenido (CMS).

¿Qué es el Jamstack y por qué es importante?

El Jamstack es una arquitectura revolucionaria que centra su funcionamiento principalmente en el navegador. A diferencia de la web tradicional, donde dependíamos de un servidor para la interacción con bases de datos o CMS, el Jamstack utiliza CDNs y microservicios para ofrecer una experiencia ultrarrápida.

Rapidez y eficiencia: La arquitectura Jamstack es conocida por su alta velocidad de carga y rendimiento.
Sin servidor tradicional: Se eliminan los cuellos de botella usuales de los servidores, haciendo la experiencia del usuario más fluida.
Flexibilidad en el renderizado: Next.js ofrece diferentes modos de rendering que permiten una personalización detallada de cómo se entregan las aplicaciones a los usuarios.

¿Por qué elegir Next.js?

Comparar la arquitectura y la estabilidad de Next.js es crucial para tomar decisiones informadas sobre el desarrollo web. Este framework no sólo es popular por su facilidad de uso, sino también por la robustez de sus características y la flexibilidad que ofrece a los desarrolladores.

Facilidad de uso: Su popularidad entre la comunidad de desarrolladores lo respalda.
Potente integración: La conexión fluida con GraphQL y Contentful optimiza la gestión de contenido.
Generación de sitios incrementales: Permite a los desarrolladores incrementar funcionalidades de manera progresiva y eficiente.

¿Cómo estructurarás tus aplicaciones con Next.js?

En este curso, no solo estudiarás el código, sino también la teoría detrás del rendimiento y estructura de las aplicaciones en Next.js. Aprenderás sobre los diferentes modos de rendering que este framework ofrece:

Client-Side Rendering (CSR): El contenido se renderiza desde el navegador, adecuado para aplicaciones que dependen de la interacción del usuario en tiempo real.
Server-Side Rendering (SSR): Las páginas se generan en el servidor en cada solicitud, ideal para aplicaciones que dependen de datos que cambian constantemente.
Static Site Generation (SSG): Se compila en el momento de construcción, ofreciendo la máxima velocidad y rendimiento para contenido que cambia mínimamente.

Al finalizar cada sección de aprendizaje, se te motivará a poner a prueba tus conocimientos construyendo proyectos que solidifiquen los conceptos aprendidos.

Atrévete a sumergirte en esta enriquecedora experiencia de aprendizaje y desbloquea nuevas capacidades en el desarrollo de sitios estáticos. ¡El conocimiento y la práctica de herramientas como Next.js son el camino hacia la innovación y la eficiencia en el mundo digital actual!

🖇 Sitios estáticos y Jamstack

Ideas/conceptos claves

Jamstack es una arquitectura diseñada para hacer que la web sea más rápida, más segura y más fácil de escalar. Se basa en muchas de las herramientas y flujos de trabajo que adoran los desarrolladores y que brindan la máxima productividad. Los principios básicos de pre-rendering y el Decoupling permiten que los sitios y las aplicaciones se entreguen con mayor confianza y resistencia que nunca.

Pre-rendering Generar el marcado que representa una vista antes de cuando se requiera. Esto ocurre durante una compilación en lugar de bajo demanda, por lo que los servidores web no necesitan realizar esta actividad para cada solicitud recibida.

Decoupling es el proceso de crear una separación limpia entre sistemas o servicios. Al desacoplar los servicios necesarios para operar un sitio, cada componente puede ser más fácil de razonar, puede intercambiarse o actualizarse de forma independiente y puede designarse como el ámbito de especialistas dedicados, ya sea dentro de una organización o como un tercero

Recursos

For fast and secure sites | Jamstack

¿Qué es JamStack?

Apuntes

Jamstack ⇒ es una arquitectura que consta principalmente y como actor principal al navegador
- La aplicación en sí consta de CDN y microservicios
- Pero para esta arquitectura no se necesita un servidor para conectarnos a las fuentes de información a comparación de un website tradicional

En general, solo hay dos formas* de renderizar una página web: en el navegador (cliente) o en el servidor

Next.js nos provee diferentes modos de rendering para poder realizar nuestros productos digitales

Arquitectura Jamstack

Datos
- Internet
- Base de datos
- Archivos locales
Generador estatico
- Encargado de tomar los datos para crear HTML y CSS
HTML/CSS

📌 RESUMEN: Jamstack es una arquitectura la cual entre sus principales características esta que el contenido se pre-renderiza lo cual hace que no sea necesario tener un servidor en sí para conectarnos a fuentes de información a diferencia de una aplicación web tradicional.

</aside>