Foto di Domenico Loia su Unsplash

Essendo approdato nel mondo di React ormai da qualche anno, mi sono lasciato incuriosire dalle tecnologie che vi gravitano attorno. Una delle declinazioni più interessanti è quella server side, grazie alla quale è possibile creare applicazioni da cima a fondo utilizzando unicamente React. Il sito che attualmente ospita questo post, per esempio, è uno dei miei primi esperimenti con GatbsyJS. In seguito mi sono poi documentato su NextJS e ho provato a costruirne una semplicissima applicazione per individuare le principali differenze e i punti di forza delle due librerie. Provo quindi in seguito ad evidenziare i punti di forza che hanno entrambi i framework seguiti dalle particolarità di ognuno.

I punti di forza comuni

Innanzi tutto si appoggiano entrambi su React che è oggettivamente una delle tecnologie frontend più diffuse, in grado di semplificare lo sviluppo e la manutenzione del codice. Il risultato finale è sempre un sito statico che riduce al minimo i processi lato server velocizzando notevolmente il caricamento di pagina (grazie anche a dei processi di ottimizzazione interni ai framework). La “staticità” delle pagine inoltre rende molto più sicura l’applicazione che di norma non apre nessuno spiraglio al codice sorgente o all’ingresso ad aree riservate. Mentre sviluppi l’hot reload ti mantiene la pagina del browser aggiornata all’ultima modifica e gli eventuali errori introdotti appaiono chiaramente in pagina. Entrambi i framework infine hanno un ottima documentazione che rende l’apprendimento davvero piacevole, sono facili da installare e forniti di una Command Line (CLI) Interface dedicata che facilita e velocizza le operazioni più comuni.

Gatbsy e i suoi plugin

Il principale punto di forza di Gatsby, ai miei occhi, è la presenza di un numero davvero impressionante di plugin che permettono di aggiungere tantissime feature facendoti risparmiare moltissimo tempo. Gatbsy parte infatti con un assetto estremamente minimale

Gatbsy fornisce ovviamente una serie di “starters” che permettono di preconfigurare il proprio sito risparmiando tempo sulle operazioni più comuni: se per esempio volete avviare un blog sono presenti diversi starters che vi permetteranno di attivare il vostro sito in pochi minuti. Un’altra caratteristica interessante di Gatbsy è che integra nativamente GraphQL per interagire con i dati (di qualunque forma: markdown, csv o servizi esterni) tecnologia che si sposa molto bene con React come si può notare in questo esempio estratto dalla loro documentazione:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default function About({ data }) {
  return (
    <Layout>
      <h1>About {data.site.siteMetadata.title}</h1>
      <p>
        We're the only site running on your computer dedicated to showing the
        best photos and videos of pandas eating lots of food.
      </p>
    </Layout>
  )
}
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Il rilascio in produzione infine è davvero semplice: basta eseguire il comando gatsby build e spostare sul proprio server i file statici generati.

Next: tempi di rilascio da record

Rispetto a Gatbsy, Next forse non può vantare un così ricco repository di plugin ma ha delle peculiarità che lo posso far preferire a seconda delle esigenze di sviluppo. Innazitutto Next inerpreta automaticamente tutti i file inseriti nella cartella “pages” come pagine del sito e li espone quindi al browser. La principale particolarità di Next probabilmente è la possibilità di servire tre differenti tipi di pagine:

• static page: semplici pagine che non richiedono processi prima del caricamento e che quindi il browser caricherà molto rapidamente;
• pre-rendered page: questo tipo di pagine possono eseguire dei processi prima di essere servite ma al momento del rilascio saranno convertite in pagine statiche mantenendo le performance molto alte;
• data fetching page: queste pagine sono indispensabili se si vuole processare dei dati ad ogni richiesta;

Ecco alcuni esempi, seppur parziali, per concretizzarne l’utilizzo: creerò come pagina statica la classica pagina di presentazione del sito che contiene solo HTML. I post di un blog potranno essere creati come “pre-rendered page” per poterli leggere per esempio da file in formato markdown: una volta pubblicato il post non avrò più necessità di aggiornarlo man mano che sarà visitato dagli utenti. Se invece voglio pubblicare i dati meteo di una località che quindi muteranno di giorni in giorno avrò bisogno del data fetching che manterrà le informazioni aggiornare al momento della richiesta.

Per concludere una menzione d’onore al processo di deploy: grazie al servizio fornito da Vercel (piattaforma fornita dai creatori di Next) è possibile pubblicare il proprio sito in tempi record. Per fare ciò è necessario ospitare il codice su repository git (github per esempio) e registrarsi su Vercel che vi guiderà passo passo nella pubblicazione che terminerà in pochi minuti. Vercel offre gratuitamente uno spazio non professionale grazie al quale è possibile testare direttamente il go live. Inoltre offre dei sotto domini collegati all’applicazione pubblicata e la possibilità di caricare una preview delle modifiche senza scomodare la versione in produzione.

Conclusioni

A seguito quindi di questa rapida e superficiale analisi valuto entrambi degli ottimi strumenti estremamente moderni e all’avanguardia. Per aiutare a scegliere tra uno e l’altro la considerazione che farei è: se devo costruire un’applicazione abbastanza standard in poco tempo Gatbsy potrebbe risolvermi diversi problemi grazie ai suoi starters e plugin; se al contrario devo implementare delle caratteristiche abbastanza particolari con Next la sensazione è di avere più il controllo diretto del codice mantenendo comunque una serie di vantaggi connessi ai siti statici.