Ci sono molti framework basati su React oggi, inclusi Gatsby, Next.js, Remix, Redwood, Blitz e altri.
Next.js è diventato uno dei framework più popolari al mondo grazie alla sua attenzione alle prestazioni, alla developer experience e alla stretta integrazione con la piattaforma di distribuzione degli stessi creatori Vercel.
Recentemente Remix è stato molto discusso e paragonato a Next.js come alternativa. Molti sviluppatori stanno già valutando Next.js come un potenziale strumento da utilizzare per creare le proprie applicazioni.
Prima di scegliere quale dei due framework utilizzare, ti chiederai: Quali caratteristiche hanno? Com’è l’esperienza dello sviluppatore quando si utilizzano questi due framework? Uno è più performante dell’altro? Come si integrano con altri strumenti? Con quali piattaforme di distribuzione sono compatibili?
In questo articolo, esploreremo le somiglianze e le differenze tra i due framework.
Background per confrontare Remix e Next.js
Next.js è un framework open source creato nel 2016 e gestito dal team di Vercel, un popolare provider di distribuzione e hosting. La società è stata protagonista di una rapida ascesa negli ultimi anni.
Remix è stato originariamente rilasciato da Ryan Florence e Michael Jackson con una licenza a pagamento: nell’aprile 2020 hanno annunciato Remix, a ottobre 2020 hanno rilasciato una “anteprima per i sostenitori” a pagamento e a novembre 2021 hanno finalmente reso completamente open source il progetto.
Meta-framework basati su React + Router
Osserviamo le somiglianze tra i due framework.
- Sono entrambi basati su React, anche se Remix attualmente prevede di aggiungere il supporto per altri framework, come Vue e Svelte;
- Entrambi utilizzano il file system per definire le rotte, comunemente indicati come “file-system-based routing“;
- Entrambi danno la possibilità di dichiarare percorsi dinamici e hanno la propria sintassi specifica per realizzarli: Remix proviene dai creatori di React Router e quindi si basa molto su quella libreria, in particolare React Router v6; Next.js ha implementato il proprio router.
Il vantaggio principale di React Router (e quindi Remix) rispetto al router Next.js è che consente il routing nidificato con layout nidificati.
Con Next.js, se vuoi aggiungere layout nidificati, devi eseguire il rendering del layout su ogni pagina manualmente e aggiungerlo dalla pagina _app con logica personalizzata. Tuttavia, questa tecnica è una soluzione documentata che presenta alcune limitazioni quando l’annidamento è più profondo di due livelli.
API standard Web e API Node.js
Remix è basato su API Web standard mentre Next.js è basato su API Node. Con Remix non dovrai imparare tante astrazioni aggiuntive sulla piattaforma web, probabilmente imparerai concetti che ti saranno utili indipendentemente dallo strumento che deciderai di utilizzare in seguito.
Oltre alle API, il core di Remix non si basa sulle dipendenze Node ed è quindi più portabile in ambienti non Node come Cloudflare Workers e Deno Deploy. Ciò ti consentirà di eseguire Remix “on the edge” più facilmente.
L’esecuzione “on the edge” significa che i server che ospitano le tue applicazioni sono distribuiti in tutto il mondo invece di essere centralizzati in un’unica posizione fisica: quando un utente visita il sito, viene indirizzato al data center più vicino a lui e con tempi di risposta estremamente rapidi.
Generazione di siti statici e rendering lato server
Next.js supporta sia la generazione di siti statici (SSG) che il rendering lato server (SSR).
Con Next.js puoi ottenere SSG utilizzando il metodo getStaticProps per recuperare i dati in fase di compilazione o il metodo getStaticPaths per specificare percorsi dinamici per il pre-rendering delle pagine in base ai dati. getServerSideProps può essere utilizzato per recuperare i dati su ogni richiesta di rendering lato server.
Remix supporta solo SSR e non supporta SSG. Questo potrebbe sorprendere gli sviluppatori cresciuti su Jamstack. Tecnicamente puoi eseguire la tua app Remix tramite Puppeteer per eseguire il pre-rendering dell’HTML o utilizzare l’intestazione HTTP Cache-Control per memorizzare nella cache l’HTML in una CDN.
Potresti anche aver sentito parlare della rigenerazione statica incrementale (ISR) di Next.js che ti consente di ottenere lo stato non aggiornato durante la riconvalida. Le risposte possono essere memorizzate nella cache e servite, mentre la cache è fresca e le richieste di dati aggiornati riceveranno una risposta non aggiornata mentre il server tenta di riconvalidare. La cache viene aggiornata dopo la riconvalida.
Remix non supporta ISR perché puoi usare l’ intestazione HTTP Cache-Control per approssimare un comportamento simile, che richiede uno sforzo manuale maggiore. Se sei interessato a Time to First Byte molto veloce e desideri che il framework si occupi automaticamente delle regole di base della memorizzazione nella cache, ti consigliamo di considerare l’opzione statica con Next.js.
Recupero dei dati
Sia Remix che Next.js forniscono meccanismi integrati per il recupero dei dati.
Next.js include i metodi discussi in precedenza (getStaticProps, getStaticPaths, getServerSideProps) per eseguire diversi tipi di recupero dei dati a seconda che si desideri recuperare in fase di esecuzione, in fase di compilazione, sul client o sul server. Gli oggetti restituiti da getStaticProps o getServerSideProps vengono inseriti come prop nel componente della pagina. Con Remix puoi accedere ai dati del caricatore solo utilizzando l’apposito hook.
Remix ha una convenzione di caricamento incorporata e un hook useLoaderData che restituisce i dati analizzati JSON dalla funzione di caricamento del percorso. Gli oggetti restituiti da un loader verranno automaticamente convertiti in un oggetto Fetch Response che può essere restituito. Questo può essere utilizzato per modificare le intestazioni, il che è particolarmente utile per la memorizzazione nella cache.
Remix aggiunge un po’ di sugar syntax rispetto a Next.js, ma ottengono funzionalità simili per il recupero dei dati con implementazioni leggermente diverse. La preferenza per l’uno rispetto all’altro dipenderà principalmente da una questione di gusti.
Gestione dei moduli
Next.js utilizza JavaScript per comunicare con il server dal client. Un gestore onSubmit viene utilizzato per inviare i dati del modulo POST a una route API sul server. Questo è un approccio comune con altre applicazioni a pagina singola e richiede allo sviluppatore di scrivere codice JavaScript standard per ottenere la funzionalità di base. Puoi anche usare una libreria come react-hook-form .
Remix, d’altra parte, si basa sull’elemento del modulo HTML nativo del browser. Poiché Remix viene fornito con una nozione di server per impostazione predefinita (che potrebbe essere un vero server persistente o una funzione serverless), include anche un gestore POST lato server in stile PHP. Ciò significa che il tuo modulo Remix funzionerà senza la necessità di JavaScript. Un utente potrebbe anche avere JavaScript disattivato e sarà comunque in grado di utilizzare il sito web.
Auth
Entrambi forniscono opzioni per includere le librerie per l’autenticazione e l’autorizzazione, ma non hanno soluzioni native. Sono state create soluzioni di terze parti per ciascuno, inclusi next-auth e remix-auth.
Se non vuoi adottare un approccio basato su token, Remix include anche il supporto integrato per i cookie, che può semplificare l’ottenimento delle sessioni.
Distribuzione
Sia Remix che Next.js offrono un’ampia gamma di opzioni di distribuzione con vari compromessi, tra cui la distribuzione basata su funzioni senza server e la distribuzione tradizionale basata su server. Le opzioni di distribuzione disponibili sono una testimonianza della partnership sempre più potente tra framework open source e provider di distribuzione.
Alcuni anni fa, la maggior parte dei framework includeva il supporto integrato solo per uno o due provider, a condizione che fornissero supporto integrato.
Remix attualmente supporta Architect, Cloudflare Workers, Fly.io, Netlify e Vercel. Ciò consente di eseguire Remix con funzioni serverless, contenitori e macchine virtuali. Non dipende da un ambiente Node a causa del suo utilizzo di API standard web.
Next.js supporta Vercel, Netlify e qualsiasi provider di hosting che supporta un ambiente Node o Docker.
Indipendentemente dalla tua applicazione, dai tuoi utenti o dai tuoi requisiti, troverai quasi sicuramente una buona distribuzione adatta a entrambi i framework.
Varie funzioni extra
Poiché Remix è nuovo, non dispone di alcune funzionalità extra incluse da Next.js, come un componente immagine, l’inline CSS automatico dei caratteri e il routing internazionalizzato.
Entrambi includono convenzioni per l’aggiunta di link e metainformazioni nella testata della tua pagina e anche la possibilità di aggiungere la gestione degli errori all’applicazione.
Dunque: Remix o Next?
Remix include molti miglioramenti nell’esperienza degli sviluppatori grazie alle nuove astrazioni e all’esperienza utente distribuendo meno JavaScript.
Tuttavia, Next.js è in fase di sviluppo da molto più tempo, ha una community di utenti più ampia e ha più risorse dedicate al suo sviluppo dal team di Vercel.
Come con la maggior parte delle nuove tecnologie, Remix viene utilizzato per molti progetti personali e toy applications, con la notevole eccezione del sito Web di Kent; Next.js, d’altra parte, viene utilizzato in un gran numero di production applications.
Entrambi i framework sono adatti a un’ampia gamma di applicazioni che rientrano in casi d’uso simili, inclusi blog, e-commerce e dashboard ad alta intensità di dati.
La scelta dell’una rispetto all’altra dipenderà in gran parte da quali funzionalità specifiche sono richieste per la tua applicazione, quale stile di sviluppo è preferito dagli sviluppatori del tuo team e quanta tolleranza hai per la tecnologia appena creata.
Ecco un riepilogo delle diverse categorie di cui abbiamo discusso:
Non perderti, ogni mese, gli approfondimenti sulle ultime novità in campo digital! Se vuoi sapere di più, visita la sezione “Blog“ sulla nostra pagina!