Páginas web ultrarrápidas con Gatsby + ReactJS

No se si wordpress tiene días contados o no

Pero se que es muy lento. Será porque carga todos los plugins y librerías al inicio? Será porque todo usa la base de datos incluso para respirar? Será porque usa PHP? Será porque la página se construye dinamicamente con cada visita ??

A veces parece que hay demasiado "over-engeneering" detras para servir una simple página web.

Se que optimizar la carga en un wordpress puede ser un buen castigo. Y cada 2 por 3 se rompe algun plugin y nos da sorpresas. Encima cada plugin nuevo es un agujero por donde los atacantes pueden entrar... ¿Se puede dormir tranquilo?

¿Hemos creado un monstruo?! XDD

• Recientemente fue demostrado que por cada segundo de retraso en la carga de la web, baja la conversión en un 9-10%.
• Google beneficia las páginas web que cargan más rapido a la hora de posicionar las páginas en su buscador.

Gatsby al rescate - la nueva forma de crear páginas web

Gatsby es un "generador" de páginas web estáticas que ha ganado mucha popularidad recientemente. Gatsby es parte de JAMstack, hablo más sobre eso aquí:

7 razones para usar JAMstack

Otras alternativas al Gatsby son:

• Jekyll,
• NextJS,
• Hugo
• VuePress,
• otros 50 generadores y la lista sigue creciendo

Gatsby esta basado en ReactJS

ReactJS es un framework muy popular para desarrollo Frontend creado y soportado por Facebook.

Gatsby aprovecha todo el poder y las buenas practicas del ReactJS, de su comunidad, plugins, componentes, etc.. Por lo tanto es conveniente tener unos conocimientos básicos de ReactJS o estar dispuesto a aprender.

Gatsby acelera las páginas web a la velocidad de la luz

Garantiza una carga rápida y segura del contenido sin retrasos innecesarios ya que no necesita consultar CMS en tiempo real.

FeedYouWeb.com carga en un instante gracias a Gatsby!

Los usuarios y clientes de hoy quieren visitar sitios web que cargan muy rapido en su movil.

Creo que a nadie le gusta esperar

Una página web que cargue lento degrada la experiencia del usuario.

Gatsby convierte tipicos sitios web de contenido en aplicaciones ultrarrápidas que siempre atraen y enganchan a los usuarios y clientes. Sus ventajas son:

• velocidad,
• seguridad,
• escalabilidad,
• personalización

Si tienes más curiosidad, mira esto: https://www.gatsbyjs.com

¿Tienes 5 minutos? Iniciemos un entorno de desarrollo local para una nueva página web

Como prerequisito inicial necesitamos tener NodeJS instalado. Puedes descargarlo en NodeJS.org

Una vez instalado NodeJS, tendremos npm, y ejecutamos estos comandos desde el terminal:

npm install -g gatsby-cli

npx gatsby new mi-nueva-web

cd mi-nueva-web

gatsby develop

Después de esperar unos segundos se abrirá una nueva solapa en el navegador (http://localhost:8000) donde podremos previsualizar nuestro proyecto.

Deploy time? Como subir a produccion?

Cuando estemos listos para subir a produccion debemos hacer un build local

gatsby build

Gatsby crearea un build optimizado, de páginas estáticas - listo para que lo subamos (con git, scp o sftp) a la nube, hosting o la CDN que tengamos.

Para previsualizar nuestro build local, lanzamos

gatsby serve

La tecnología es increible! En solo 5 minutos tenemos un entorno local de desarrollo listo para un nuevo proyecto!

Estructura del proyecto:

• src/pages - lugar para guardar páginas
• src/templates - donde guardamos templates de páginas
• src/components - ahi guardaremos los componentes
• content/assets - sitio para imágenes y css
• content/blog - lugar para almacenar posts

Ya podemos abrir src/pages/index.js o src/components/layout.js y que comienze el desarrollo A divertirse!

• Con cada cambio que guardemos el navegador auto-refrescara la página.