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

Diferencias entre SPA, SSR y Gatsby

3/33

Lectura

Texto por @juandc

Gatsby no solo es rápido, también es seguro.

Para entenderlo mejor debes conocer las diferencias entre Server Side Render y Single Page Applications.

React en Single Page Applications

Este tipo de aplicaciones es muy común cuando trabajamos con React.js.

Las SPAs son páginas que siempre cargan el mismo archivo HTML. Este, a su vez, carga un archivo gigante de JavaScript con toda la lógica de nuestra apliacación (por ejemplo, usando React.js).

Estas páginas tienen una carga inicial muy lenta, ya que no podremos ver la información importante hasta que termine de cargar el archivo de JavaScript. Pero una vez termina la carga inicial, las SPAs son muy rápidas, incluso al navegar por diferentes secciones de nuestra aplicación.

Como el archivo de JavaScript tiene todo el código de nuestra aplicación, el tiempo de navegación pasa de segundos a milisegundos. No necesitamos hacer más requests al servidor. Pero en mucho casos debemos esperar algunos segundos para que termine la carga inicial y podamos utilizar la aplicación.

React en Server Side Rendering

Diferentes herramientas como Next.js nos ayudan a utilizar React en el servidor para no afectar el SEO y disminuir el tiempo de carga de nuestra aplicación, todo esto sin perder interactividad.

El Server Side Rendering tradicional es muy común en aplicaciones construidas con WordPress, por ejemplo. Aunque estas páginas tienen un tiempo de carga muy corto, la carga debe repetirse cada vez que el usuario navega por nuestra aplicación, es decir, casi todas las veces que damos click en un link o botón.

Las herramientas de SSR con React.js son muy conscientes de este problema, por lo que convierten nuestra aplicación en una SPA inmediatamente después de que termina la carga inicial. Es decir, utilizan SSR en la primera carga y luego se convierten en SPAs para mejorar la navegación e interactividad de nuestro sitio.

React en Gatsby: lo mejor de ambos mundos

Gatsby es un generador de sitios estáticos. Esto quiere decir que en vez de renderizar desde el servidor, lo que sucede cada vez que un usuario entra a nuestra aplicación, Gatsby renderiza el contenido solo una vez en la etapa de desarrollo. Nuestro servidor no debe renderizar todo el tiempo, solo envía el HTML inicial (ya renderizado) para que más adelante el navegador se encargue de cargar el código JavaScript que nos ayudará a que nuestra página funcione como una SPA.

De esta forma obtenemos todos los beneficios: por ser una SPA, seguimos teniendo una alta interactividad y navegación muy rápida, y además, conseguimos una carga inicial muy rápida, en algunos casos incluso superior a la del SSR.

Gatsby vs. WordPress

Gatsby también nos ayuda a consumir información desde un CMS como WordPress. De esta forma podemos editar nuestro contenido desde una plataforma que ya conocemos sin que esto afecte al rendimiento de nuestra aplicación.

Gatsby:

  • Utiliza el Virtual DOM (más velocidad)
  • Componentes
  • Hot Reloading
  • Code Splitting e imágenes responsivas

WordPress:

  • Manejo manual del DOM
  • Debemos copiar y pegar para reutilizar código (aunque las buenas prácticas nos pueden ayudar bastante)
  • Refresh para ver los cambios

Aportes 15

Preguntas 1

Ordenar por:

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

Hora que gatsby se puede trabajar con worpress headlees quire decir que podemos seguir trabajando el backend desde wordpress y el frontend con gatsby y react. De esta manera las desventajas de wordpress se solucionan. 😮

es muy interesante aprender gatsby ya que nuestro ecommerce puede cargar en mili segundos y ha google le encanta eso y así podemos estar mas rápido entre las primeras posiciones

Buen resumen

Qué interesante sesión! Vamos por más…

Buena información !! , es importante saber que es lo que sucede detrás de todo desarrollo para seguir avanzando !!

No entiendo bien las diferencias entre gatsby y next alguien me explica?

Super interesante, me siento emocionado de aprender este Framework y poder usarlo en mis futuros proyectos, ademas que el profesor es excelente explicando, hasta ahora xd

Me parece increíble lo que se puede llegar a hacer con Gatsby, y solo estamos en la tercera clase 😄

Muy claro el resumen muchas gracias.

Digamos si quisiera manejar todo mi contenido SEO, environments cual seria mejor nextJS o Gatsby tengo esa duda ? gracias 😄

super bien!!!

Buen resumen, basicamente la clase anterior.

A qué se refiere con que al final SSR y GATSBY terminan funcionando como SPA??

Excelente lectura, me queda un poco más claro

Ya entiendo. La diferencia entre un generador de sitios estáticos y el SSR, es que en los generadores el proceso de construcción se realiza una sola vez.