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. 😮
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
Diferencias entre SPA, SSR y Gatsby
3/33Lectura
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:
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.