¿Por qué Gatsby? Seguridad y Velocidad

Clase 1 de 33 • Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Resumen

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.

Juan Castro

teacher•

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.

Bernardo Aguayo Ortega

student•

otra alternativa

Omar Gabriel Aguilar Moscoso

student•

nuxt es mejor :v

Bob Code

student•

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

Nathaly Stefani Riaño Bejarano

student•

Hola! Lo que dices es muy cierto, la carga inicial y el SEO se pueden solucionar con dichas librerías, la cuestión, es ver la herramienta que te sirve según los requerimientos del proyecto. Ejemplo, si tu proyecto es tu portafolio (sólo quieres mostrar los proyectos que has realizado y los cursos, diplomas, etc) la herramienta que se acomoda perfecto es Gatsby, precisamente porque los datos no son dinámicos y no vas a tener mayor interacción con el usuario. Por otro lado, si el proyecto requiere de interacción y dinamismo puedes entrar a evaluar las otras herramientas. Saludos!

Andres Gazui

student•

Hola compañero, en parte tienes razón que estos métodos nos ayudan con el SEO y la carga inicial. Sin embargo sigue ocurriendo un problema y es que el HTML inicial es una estructura completamente vacía con solo un elemento div dentro de esta el cual carga todos los elementos una vez nuestro JS haya cargado por completo, esto lo que genera es que los bots indexadores de google no puedan entender bien la estructura de nuestras webs al no haber contenido ni HTML semántico en la carga inicial y por ende dando un mal puntaje dentro del propio SEO, aquí es donde entran herramientas como NEXT o Gatsby que nos permiten usar estrategias de carga estática o renderizar desde el servidor :)

Matias Niz

student•

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.

Nicolas Gonzalez

student•

Justo queria comentar lo mismo, la ventaja del SSR, es que las otras paginas estan disponibles se hace pre loader

Rubén Maier Enzler

student•

Tengo una duda, ¿podría hacer una PWA con esta tecnología si convino los conocimientos del curso de "PWA con react" y este?

Jose Carlos Correa

teacher•

Por supuesto, en el proyecto que te genera el comando ´gatsby new´ del cli de gatsby hay un plugin llamado gatsby-plugin-offline que está comentado, basta con des-comentarlo para tener una PWA con gatsby. Tu sitio instalable. incluso hay starters que ya vienen configurados para ser una PWA

Rubén Maier Enzler

student•

Gracias @joss_dz

Wandy Rafael Santana Evangelista

student•

Cabe destacar que hoy en dia ya no es now, ahora se llama vercel.

Edgar de Jesus Mendoza Ortegon

student•

excelente explicación.

Andrés Felipe Largo Rodríguez

student•

Ya estamos en 3.0... ¿cuándo se actualizará?

Edgar de Jesus Mendoza Ortegon

student•

¿podemos usar otro backend cómo por ejemplo Python o Golang?

Juan Castro

teacher•

Pra crear una API y consumir su información, sí. Para el render, no.

Andres Hernandez Lozano

student•

No importa de donde vengan los datos...Puede ser de un API construido en cualquier lenguaje.

Daniel Hurtado

student•

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?

Cristhian García

student•

Para aplicaciones como Platzi, se debe usar otra tecnología. El fuerte de Gatsby es su velocidad, teniendo en cuenta que Google posiciona mejor los sitios web con buen rendimiento, Gatsby es ideal para Blogs o Tiendas en donde lo importante es el SEO.

Jonathan Martin Ortega Jimenez

student•

Ese problema se resuelve con los recientemente anunciados Incremental Builds: https://www.gatsbyjs.org/docs/page-build-optimizations-for-incremental-data-changes/

Con esto la posibilidad de tener sitios enormes pasa de ser complicado a ser perfectamente posible. Eso expande aun mas la posibilidad de crear sitios de cualquier tipo con Gatsby.

Omar Jalil Fierro López

student•

Para cuando el curso de gridsome?

Omar Gabriel Aguilar Moscoso

student•

porfin un profe que si sabe enseñar

Wandy Rafael Santana Evangelista

student•

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 💚

Darwin Yusef Gonzalez

student•

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?

Jose Carlos Correa

teacher•

Claro que es posible, gatsby tiene un plugin que te permite trabajar con esta tecnología. Incluso existe este starter que te permite trabajar con la configuración de gatsby + amp

Rubén Maier Enzler

student•

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.

Jose Carlos Correa

teacher•

El detalle está en que en un Sitio de SSR, la respuesta del servidor fue preparada en el servidor en tiempo de ejecución. Esto quiere decir que hay una maquina haciendo el procesamiento de tu petición y devolviendo un sitio renderizado. Gatsby genera las vistas del proyecto y te entrega todo listo.

William Velázquez

student•

Tenía entendido que NextJS también generaba sitios estáticos entonces, ¿Cuál sería la diferencia entre Gatsby y NextJS?🤔

harol chumbe

student•

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?

Jonathan Martin Ortega Jimenez

student•

Si es posible, en realidad depende de que estes pensando hacer y que posibilidades tienes. Por ejemplo todo el contenido de los productos en un ecommerce puede ser pregenerado y de necesitar algo como profile o tracking de ordenes podrias hacer uso de rutas del lado del cliente unicamente o paginas que no cargan contenido pregenerado unicamente sino que tambien consultan a un API para el contenido altamente dinamico.

Richard Delfin Berna Capo

student•

Se puede desplegar un proyecto hecho en gatsby en un servidor apache?

Jose Carlos Correa

teacher•

Si, lo montas como estaticos y listo :D

Jose Carlos Correa

teacher•

https://spectrum.chat/gatsby-js/general/how-to-use-gatsby-on-an-apache-server~f86ba457-3c76-4756-9a08-69389368fe52

Aun que te recommiendo mantenerlo en Netlify o Vercel.

José Alberto Ortiz Vargas

student•

Puedo hacer backend con PHP y Frontend con Gatsby?

Fernando Mendoza Bazan

student•

Si, por medio de una API.

Juan Diego Silva Garcia

student•

Dónde puedo descargar la documentación que utiliza el profesor para el curso?

Davis Figueredo

student•

Ayudaaa... No entiendo esos termino de los que hablan. ¿podrian guiarme que curso debo tomar para entender?

Gracias !!

Jorge Marroquin

student•

¿Qué conceptos en específico quisieras entender, Davis? De manera que podamos recomendarte cursos precisos. :D

Davis Figueredo

student•

Quiero aprender desde cero el tema!! Muchas gracias !

Juan ibañez

student•

En este caso igual es posible solo pre generar una parte y dejar un bloque , que si se alimente de un fetch directo en client side rendering?

¿Por qué Gatsby? Seguridad y Velocidad

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