> ## Content Index > Fetch the complete content index at: https://www.alessiopomaro.it/llms.txt > Use this file to discover other available public pages before exploring further. # Cos'è Gatsby? Un esempio di quello che serve oggi nello sviluppo web! - URL: https://www.alessiopomaro.it/gatsby-sviluppo-web/ - Published: 2021-08-18T06:00:00.000Z - Updated: 2022-10-21T16:20:23.000Z - Description: Nello sviluppo web di oggi sono necessari 3 ingredienti: prestazioni, integrazione, velocità di deployment. Gatsby è una risposta interessante a queste necessità. Scopriamo di cosa si tratta. - Author: Alessio Pomaro - Tags: Sviluppo WEB, SEO ### Cosa serve oggi nello sviluppo web? Dal mio punto di vista, servono principalmente 3 elementi: 1. **prestazioni** del siti web e delle web application, 2. **integrazione** di contenuti e dati da più sorgenti, 3. **velocità** di sviluppo. ## Cos'è Gatsby? Gatsby (*o GatsbyJS*) è un sistema che mette a disposizione dei team di sviluppo un **framework open source dedicato al frontend** per la creazione di siti web dinamici e ottimizzati, e una **piattaforma cloud** per distribuirli su una rete ultraveloce. L'architettura sulla quale si fonda Gatsby è "***JAMstack***", progettata per rendere il web più veloce, più sicuro e più facile da scalare grazie a due principi fondamentali: il **[pre-rendering](https://jamstack.org/glossary/pre-render?ref=alessiopomaro.it)** e il **[disaccoppiamento](https://jamstack.org/glossary/decoupling?ref=alessiopomaro.it)**. [For fast and secure sites | JamstackWhat is the Jamstack? Why use the Jamstack? How do I get started? Learn what the Jamstack is all about and why it’s the best approach for building faster, more secure websites.![](https://jamstack.org/img/favicons/apple-touch-icon.png)Jamstack.org![](https://www.jamstack.org/img/og/default-og-image.png)](https://jamstack.org/?ref=alessiopomaro.it) Gatsby, in pratica, è una soluzione alle tre necessità dello sviluppo di oggi (elencate all'inizio del post) basata su [**ReactJS**](https://reactjs.org/?ref=alessiopomaro.it) e [**GraphQL**](https://graphql.org/?ref=alessiopomaro.it). ![Gatsby è basato su React e GraphQL](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/08/gatsby-react-graphql.webp) Gatsby è basato su React e GraphQL ## Cosa permette di fare Gatsby? Proviamo a sintetizzare e a semplificare quali sono le funzionalità principali della piattaforma. ### Creare siti web e PWA velocissimi Implementando i progetti con Gatsby, i siti web diventano delle perfette web application (***PWA***): velocissime e pronte all'uso. Questo significa che, grazie alle tecnologie utilizzate e ad una struttura del framework costruito per questo scopo, le pagine vengono caricate in millisecondi e le transizioni risultano fluide. > “To paraphrase Tolstoy, all fast websites are alike, but all slow websites are slow in different ways.” — Kyle Mathews, creator of Gatsby [What makes Gatsby sites so fast? | GatsbyWhat makes Gatsby sites so fast?![](https://www.gatsbyjs.com/icons/icon-512x512.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf)Gatsby![](https://www.gatsbyjs.com/og-image.png)](https://www.gatsbyjs.com/guides/why-are-gatsby-sites-fast/?ref=alessiopomaro.it) ### Combinare contenuti e dati da qualunque sorgente I siti web stanno diventando sempre più complessi, e sempre più spesso è necessario **integrare contenuti e dati da diversi CMS**, ad esempio **WordPress** o **Drupal**, piattaforme di **e-commerce** come **Shopify**, fino a sistemi personalizzati attraverso l'utilizzo di API. Gatsby consente agli sviluppatori di estrarre e visualizzare rapidamente i contenuti da qualsiasi fonte ed origine dati. La homepage del blog "***[Engineering & Data Science](https://airbnb.io/?ref=alessiopomaro.it)***" di Airbnb, ad esempio, è realizzata con Gatsby, ma i post sono su [Medium](https://medium.com/airbnb-engineering?ref=alessiopomaro.it). ![La homepage di airbnb.io è realizzata con Gatsby, prelevando i contenuti da Medium](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/08/airbnbio-gatsby-medium.webp) La homepage di airbnb.io è realizzata con Gatsby, prelevando i contenuti da Medium Grazie alla possibilità di **integrare diverse sorgenti di dati**, quindi, potremmo utilizzare i contenuti istituzionali ed il blog da **WordPress**, il catalogo prodotti da un **PIM (*Product Information Management*)** e le giacenze dal **gestionale**. Il tutto armonizzato nel frontend da Gatsby. ### Sviluppare in maniera pulita, veloce e moderna Gatsby porta il modello dei componenti di **React** nei siti web. L'**interfaccia utente dichiarativa** semplifica il debug del codice e aiuta i team a muoversi più velocemente. Inoltre, permette di scrivere in **Javascript moderno** o [**SCSS**](https://sass-lang.com/?ref=alessiopomaro.it) / **[LESS](https://lesscss.org/?ref=alessiopomaro.it)** senza dover impostare una "*pipeline di risorse*". [Creating UIs with React | GatsbyCreating UIs with React![](https://www.gatsbyjs.com/icons/icon-512x512.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf)Gatsby![](https://www.gatsbyjs.com/og-image.png)](https://www.gatsbyjs.com/guides/react/?ref=alessiopomaro.it) Il risultato è uno **sviluppo più rapido**, con le più **moderne tecnologie** e riducendo la probabilità di **introdurre dei bug**. [Building Beautiful Sites With Gatsby | GatsbyBuilding Beautiful Sites With Gatsby![](https://www.gatsbyjs.com/icons/icon-512x512.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf)Gatsby![](https://www.gatsbyjs.com/og-image.png)](https://www.gatsbyjs.com/guides/building-beautiful-sites/?ref=alessiopomaro.it) ### Distribuire i contenuti globalmente con un clic Grazie all'utilizzo di **CDN (*Content Delivery Network*)**, i contenuti possono essere serviti in modo più veloce e sicuro ovunque nel mondo. Invece di app server e database, con complessità operativa e rischio di tempi di inattività, **Gatsby genera il sito web come file da distribuire su una CDN**. Questo significa che finché la CDN è attiva, l'applicazione o il sito web non genererà mai errori e sarà sempre raggiungibile. [A Global Edge Network Optimized For Gatsby | Gatsby Cloud | GatsbyGatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster with Gatsby Cloud.![](https://www.gatsbyjs.com/icons/icon-512x512.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf)Gatsby![](https://www.gatsbyjs.com/og-image.png)](https://www.gatsbyjs.com/products/cloud/hosting/?ref=alessiopomaro.it) Grazie al cloud messo a disposizione da Gatsby gli sviluppatori possono contare su **una piattaforma unificata per creare, visualizzare in anteprima, distribuire** e ospitare le migliori esperienze su una CDN velocissima. Chiaramente è possibile utilizzare anche altre CDN, ad esempio **Netlify**, **Cloudflare**, **AWS Cloudfront** o **Akamai**. --- ## Gatsby e la SEO Le pagine vengono **renderizzate lato server**, quindi tutti i contenuti sono perfettamente **scansionabili da Googlebot** e dai crawler degli altri motori di ricerca. Esistono diverse risorse per approfondire l'argomento in maniera molto dettagliata. Qui sotto puoi trovare la pagina ufficiale del sito web di Gatsby ed un video in cui vengono illustrati alcuni componenti del sistema dedicati proprio alla SEO. [Adding an SEO Component | GatsbyAdding metadata to pages (such as a title or description) is key in helping search engines like Google understand your content, and decide…![](https://www.gatsbyjs.com/icons/icon-512x512.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf)Gatsby![](https://www.gatsbyjs.com/og-image_docs_how-to.png)](https://www.gatsbyjs.com/docs/how-to/adding-common-features/seo/?ref=alessiopomaro.it) La SEO con Gatsby --- ### Conclusioni Non so se ti è chiara la direzione che sta prendendo lo sviluppo (soprattutto) del frontend, ma **le moderne tecnologie ed architetture permettono di raggiungere prestazioni incredibili**. Un altro esempio lo stai provando navigando questo sito web, che non è realizzato con Gatsby ma con **Ghost** (ho inserito un approfondimento alla fine del post). Sento un'aria effervescente ed emozionante per il prossimo futuro, e tutto ciò favorirà enormemente l'**esperienza dell'utente**. > **"Il contenuto è re": ormai siamo stanchi di sentirlo.. ma lo sanno anche i competitor!** > **Se aggiungiamo al contenuto le prestazioni, avremo il re con esercito e fortezza. I competitor sanno anche questo, ma realizzare siti web veloci è difficile.** --- ### Per approfondire [Front End Framework With The Speed To Delight | GatsbyGatsby provides development teams an open source frontend framework for creating rich, optimized websites and a cloud platform for delivering them on a blazing fast edge network.![](https://www.gatsbyjs.com/icons/icon-512x512.png?v=3ad5294f3fa6c06e2d07ab07c76df2cf)Gatsby![](http://images.ctfassets.net/vkdbses00qqt/4griHByQ7M1BL0C3mdjts/6691dc39a686c2e075b1abb535ab6129/og-image.jpg)](https://www.gatsbyjs.com/?ref=alessiopomaro.it) [Cos’è GHOST?Ghost è un CMS professionale open source basato su un moderno stack tecnologico in Node.js, progettato per i team che necessitano di potenza, flessibilità e prestazioni.![](https://www.alessiopomaro.it/favicon.png)Alessio PomaroAlessio Pomaro![](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/05/ghost-cms.jpg)](https://www.alessiopomaro.it/ghost-cms/)