Next.js también es un generador de sitios estáticos, pero no tiene todo el ecosistema de plugins preparado para que los datos se encuentren disponibles tan rápido desde GraphQL.
Introducción a Gatsby
¿Por qué Gatsby? Seguridad y Velocidad
¿Qué es Gatsby?
Diferencias entre SPA, SSR y Gatsby
Preparando el entorno
Requisitos previos y herramientas de desarrollo
Gatsby y Gatsby CLI y Starters
Configuración de ESLint
Fundamentos de Gatsby
Presentación y Estructura de Archivos de nuestro proyecto: Platziswag
Ecosistema de plugins
Usando React para manejar la parte visual e interactiva de nuestra aplicación
Creando la vista con React
Router en Gatsby y Componente Link
Layout en Gatsby
Graphql en Gatsby
¿Cómo funciona GraphQL en Gatsby?
Accediendo a nuestros datos en Gatsby desde GraphQL
Queries, Edges (conexiones) y Nodos en Gatsby
Consultas en GraphQL desde React
Usando plugins en Gatsby
Instalación y configuración de plugins
Imágenes como fuente de datos
Plugins de transformación
Estilizando nuestros componentes con styled-components
Estilos Globales con styled-components
Stripe checkout
Introducción a la API de Stripe Checkout
Agregando productos a nuestra tienda en línea
Productos en React
Generando páginas programáticamente
Creando páginas en función de los datos
Manejo de Gatsby Templates
Terminando la Vista de Detalle de los Productos
StaticQuery vs. useStaticQuery
Construyendo el Carrito de Compras: useContext
Construyendo el Carrito de Compras: Vista
Construyendo el Carrito de Compras: Agregar productos al carrito
Comprando productos
Gatsby a producción
Gatsby build para compilar nuestro proyecto
Deploy a Netlify
Aprende más en el Curso de Desarrollo de Aplicaciones Web con Gatsby JS: https://platzi.com/gatsby
Adquiere hoy la suscripción a Platzi en: https://platzi.com/precios
En esta clase el profesor José Carlos Correa nos explica cómo funciona Gatsby y por qué debemos considerar su stack innovador para construir aplicaciones web rápidas y seguras.
Gatsby es un framework open source que nos facilita la construcción de aplicaciones web. Integra tecnologías como React, GraphQL y diferentes fuentes de información como Firebase, WordPress o Sanity. Su velocidad se debe a que compila la aplicación mientras desarrollamos para que el sitio en producción obtenga todos los beneficios de las Single Page Applications y el Server Side Rendering.
Aportes 26
Preguntas 6
Next.js también es un generador de sitios estáticos, pero no tiene todo el ecosistema de plugins preparado para que los datos se encuentren disponibles tan rápido desde GraphQL.
En una SPA con REACT, puedes solucionar la Carga inicial lenta con React Lazy; y, el problema del SEO, con React Helmet. Aún me quedan la curiosidad de cómo maneja Gatsby una aplicación con datos dinámicos…
Slds
Espero no equivocarme, pero con lo que vimos en el curso de Next, lo que se renderiza en el servidor es la pagina que visitamos al inicio, el resto de paginas que accedemos al navegar dentro de una app con next son client side.
Tengo una duda, ¿podría hacer una PWA con esta tecnología si convino los conocimientos del curso de “PWA con react” y este?
excelente explicación.
Cabe destacar que hoy en dia ya no es now, ahora se llama vercel.
Para cuando el curso de gridsome?
Gatsby parece ser la mejor opción. Pero, y si un sitio tiene miles o decenas de miles o cientas de miles de páginas? Por ejemplo, Platzi, que debería tener decenas de miles de páginas prerenderizadas por cada curso, gatsby se manejaría bien en ese sentido?
¿podemos usar otro backend cómo por ejemplo Python o Golang?
es recomendable usar angular con firebase, para poder usar SEO usamos gatsby y con eso la parte de la seguridad se ve completa. la pregunta es? para paginas dinamicas o portalweb con datos dinamicos se podria usar gatsby?
no veo la diferencia entre una SSR y Gatsby, es decir, el sitio estático que genera Gtsby sigue estando en un servidor, y sigue entregando las cosas por parte como hacer SSR, es decir, ambos dan en la medida en la que se lo piden.
Tengo una pregunta no se si puedan responderla, En google existe una caracteristica que potencia los buscadores llamada google https://amp.dev/ ya que AMP facilita la creación de grandes experiencias en la web. tengo entendido que solo con NEXT es posible usar amp con Gatsby es posible?
Puedo hacer backend con PHP y Frontend con Gatsby?
Dónde puedo descargar la documentación que utiliza el profesor para el curso?
Hola Devs:
Me encanta todo lo que proyecta GatsbyJS; a diferencia de NextJS que tambien posee un generador de archivos estaticos muy bueno y todo muy bien optimizado, veo que GastbyJS nos da mas opciones para trabajar como la integracion con GraphQL y mas.
-Lo cual elegir uno o el otro dependera mucho de los requerimientos del proyecto.
-Por eso les invito a profundizar muy bien los aspectos que diferencia uno del otro y en base a ese analisis, elegir el mas adecuado.
Las respectivas documentaciones para el que aun no ha explorado: GastbyJS
NextJS
Recuerden, #NuncaParesDeAprender 💚
porfin un profe que si sabe enseñar
SSR es lo mismo a lo que hace SPA con LazyLoading ?
Cuando vamos a hacer un proyecto debemos tomar la decisión de qué framework usar. Por ejemplo escogemos entre Vue y React. La ventaja es que nos crean una SPA, con la desventaja de que es 1 archivo HTML y múltiples archivos JS.
Herrmientas de SSR:
Gatsby se construye en el servidor apoyándose de NodeJS y de Webpack. También usa los plugins para obtener información de diversas fuentes.
Gatsby usa:
Ya que Gatsby hace un sitio estático es muy fácil hacer el despliegue.
Justo conozco este framework después de haber realizado un website con Vue y el SPA-Prerender Plugin para afrontar los mismos problemas que Gatsby (o Gridsome, para Vue).
Mi duda es ¿que diferencia o ventajas tendría utilizar Gatsby/Gridsome frente a hacer el prerenderizado por tu cuenta?
Se que te facilita bastante la configuración para poder fetchear contenido al momento de hacer el prerenderizado, pero a parte de eso ¿que otro plus notable tiene este framework?
Muy interesante todo lo que cubre en la parte de seguridad al no conectarnos directamente con el backend y la db
¿Con respecto al SEO el factor que diferencia a una aplicación de Gatsby frente a una SPA con React que use react-helmet únicamente sería el tiempo de carga inicial?
En este caso, gatsby seria perfecto para crear landing pages? o igual existiria problemas con el SEO?
Gatsby es un sitio estático funciona con plugln como GraphQL para obtener la información y React para generar las vistas.
Me deja bastante intrigado sobre esta tecnología y más por que sigo usando React 💚
Pasa lo mismo con Angular?
Me queda claro que en cuestión de performance Gatsby es superior a Wordpress. Preso la gente usa wordpress por lo rápido que es para crear sitios y por sobretodo lo fácil que es para un usuario sin conocimientos de programación subir contenido a la página. En este sentido, si yo creo un sitio usando Gatsby par aun cliente, existe alguna opción para que usuarios sin conocimientos puedan ir por ejemplo actualizando los productos de un e-commerce o necesariamente necesitarán el soporte de un desarrollador constantemente?. Saludos.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.