Introducción a Gatsby

1

¿Por qué Gatsby? Seguridad y Velocidad

2

¿Qué es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuración de ESLint

Fundamentos de Gatsby

7

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

8

Ecosistema de plugins

9

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

¿Cómo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalación y configuración de plugins

17

Imágenes como fuente de datos

18

Plugins de transformación

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducción a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en línea

23

Productos en React

Generando páginas programáticamente

24

Creando páginas en función de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producción

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

¿Por qué Gatsby? Seguridad y Velocidad

1/33
Recursos
Transcripción

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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 ?

¿Por qué Gatsby? Seguridad y Velocidad

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:

  • Nuxt (para Vue)
  • Next.js (para React)

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:

  • Virtual DOM
  • Componentes
  • Hot Reloading
  • Code Splitting e imágenes responsivas

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.