Se ne sente tanto parlare… ma alla fine che cos’è Nuxt? 😉 Nuxt è un framework open-source basato su Vue.js che permette di scrivere progetti web in modo più veloce ed automatizzato. Automatizza le parti più ripetitive che abbiamo in Vue.js aggiungendo anche tutta una serie di funzionalità effettivamente molto interessanti.
Il video ufficiale presenta le principali funzionalità di Nuxt in 100 secondi, ma la prima domanda da farsi è: serve veramente imparare Nuxt? E se ha tutte queste funzionalità fighissime in più rispetto a Vue.js “classico”, allora Vue.js non ha più senso di esistere ed è meglio usare sempre Nuxt? La risposta, come spesso in informatica, è: DIPENDE!
Diamo per scontato che chi si imbatte in questo articolo conosca (abbastanza) bene Vue.js o comunque i principali framework javascript di questi anni (Angular e React in primis) e come funzioni la logica a componenti e la reattività che tutti e 3 i framework, seppur con differenze, mettono a disposizione in maniera pressoché identica.
Se avete usato uno di questi 3 framework saprete tutti che il problema principale in realtà è principalmente uno solo: il rendering lato client e la non indicizzazione sui motori di ricerca.
Nuxt (ma lo stesso dicasi per Next e Angular universal) è vero che offre un sacco di funzionalità in più, ma quello che fa la differenza è la SEO, c’è poco da fare. In origine i 3 framework erano nati per costruire web application, dashboard, gestionali, interfacce grafiche che 9 volte su 10 sono dietro autenticazione e che quindi non avevano bisogno di indicizzazione sui Search Engine.
Raramente, infatti, trovavamo siti web realizzati con queste tecnologie, proprio perché non sono nate per i siti e anzi, usarle in tal modo complica le cose. Per i siti regnava ancora (purtroppo) incontrastato jQuery. Però col tempo è aumentata l’esigenza di poter sfruttare questi nuovi framework sempre per applicativi complessi ma che necessitassero di indicizzazione. Tipico caso sono gli e-commerce, insomma, che hanno bisogno di un’ottima esperienza utente ma su dominio pubblico.
Ecco, alla fine quindi Nuxt è un framework che consente di scrivere applicazioni web (e per quanto detto prima) e siti web sfruttando Vue.js e la sua reattività, con la possibilità anche di essere indicizzato sui motori di ricerca, pertanto con un impatto SEO davvero ottimale.
Nuxt mette inoltre a disposizione tutta una serie di funzionalità che velocizzano lo sviluppo e lo semplificano: alcune di queste sono obbligatorie e dobbiamo usarle per forza come Nuxt ci impone, altre invece sono utilizzabili opzionalmente e c’è un po più di libertà.
Corso Nuxt, inserto su Vue.js ADVANCED, scopri di più!
Nuxt: molto di più di un framework “accessorio” di Vue.js
Nuxt perciò è molto più framework rispetto a Vue.js. Perché pensa più all’infrastruttura del progetto che alla sua sintassi. Vediamo allora quali sono le funzionalità “aggiuntive” principali:
- Con Nuxt i componenti, se li mettiamo nella cartella apposita “components” non hanno bisogno di essere importati esplicitamente quando si usano, evitando di avere una marea di import ad inizio file. Non fa la differenza ma è cosa apprezzata.
Lo stesso vale per composable, utils, middleware, pages … Un po’ come accade con Laravel: se mettiamo le cose nel posto giusto e col nome giusto scriviamo molto meno codice.
- Il routing è su filesystem, quindi non abbiamo più bisogno del file che ci gestisca il routing e l’accoppiata rotta-componente, fa tutto da solo.
- Possiamo usare i layouts per riutilizzare i componenti come fossero dei template: cosa che si fa anche in Vue.js, ma mentre in Vue.js dobbiamo implementarla noi a mano, qui è standardizzata.
- Poi c’è la gestione ottimizzata delle immagini che ridimensiona ed ottimizza automaticamente le immagini
- Una cosa opzionale di Nuxt è la parte server: sappiamo che da Vue.js se usiamo REST API non possiamo collegarci direttamente ad un database, ma lo facciamo tramite api di un backend scritte in qualsiasi altra tecnologia, quindi altra codebase, e dunque altra storia.
Nuxt in realtà mette a disposizione anche la parte server. Cioè, se non abbiamo un backend già fatto, volendo lo possiamo fare direttamente dentro il progetto, scriveremmo le nostri api usando il server Nitro e la libreria h3 (che si ispira a Express) e Nuxt poi si collegherà ad esse. In questo caso sono api interne invece che esterne, come di solito avviene.
Queste sono, senza alcun dubbio, i principali vantaggi che Nuxt ci dà rispetto a VueJs
Quando invece usare Vue.js e non Nuxt…
Dopo tutto ciò sembrerebbe allora che Nuxt convenga di gran lunga rispetto a Vue.js. In realtà ci sono degli “svantaggi” da tenere in considerazione.
- Debito tecnico: aumentiamo la dipendenza del nostro progetto dalle regole obbligatorie che il framework ci impone
- Routing su file system: è comodo, senza dubbio, ma ci sono alcune casistiche (tipo le rotte multilingua) che rendono complicata la loro gestione
- Tempi di rilascio: essendo basato su Vue.js, le nuove versioni di Nuxt usciranno sempre dopo le versioni di Vue.js.
- Comunità: sta crescendo indubbiamente, ma non è paragonabile ancora a quella di Vue.js.
Tornando alla domanda iniziale, ha senso allora imparare Nuxt?
La risposta è sì Se devo fare un nuovo progetto cosa scelgo, Vue.js o Nuxt? Quando tocca a me scegliere in tal senso faccio le seguenti considerazioni:
-
- Se la SEO è fondamentale, il problema non si pone: Nuxt per forza.
- Se la SEO non serve e non ho backend: Nuxt con nitro
- Se la SEO non serve e ho backend:
-
- se l’applicazione è medio-piccola e/o non ha bisogno delle rotte multilingua probabilmente vince Nuxt anche in questo caso perché la velocità e gli automatismi che mette a disposizione valgono la maggiore “rigidità” che Nuxt mi impone.
- se l’applicazione è complicata, e voglio avere un controllo più profondo del codice allora secondo me meglio Vue.js, anche a costo di avere un codice meno automatizzato.
