Il problema del rendering lato client
Le applicazioni React nel 2016 funzionano interamente nel browser: il server invia una pagina HTML vuota, il browser scarica il bundle JavaScript, lo esegue e solo allora l’utente vede il contenuto. Questo approccio — il client-side rendering (CSR) — ha conseguenze concrete: i motori di ricerca faticano a indicizzare contenuti generati da JavaScript, il tempo al primo contenuto visibile è elevato su connessioni lente, e la configurazione di webpack, Babel e server per ottenere il rendering lato server richiede un lavoro significativo. Next.js, rilasciato da Zeit (poi rinominata Vercel) sotto la guida di Guillermo Rauch, propone una soluzione integrata.
Server-side rendering e getInitialProps
Next.js porta il server-side rendering (SSR) in React senza richiedere configurazioni manuali. Ogni pagina viene renderizzata sul server alla prima richiesta: il browser riceve HTML completo con il contenuto già visibile, poi React “reidrata” la pagina rendendola interattiva. Il meccanismo è trasparente allo sviluppatore.
La funzione getInitialProps è il punto di contatto tra server e pagina: viene eseguita sul server durante la prima richiesta e nel browser durante la navigazione client-side, permettendo di caricare dati da API o database prima che la pagina venga renderizzata. Lo sviluppatore scrive la logica una sola volta e il framework decide dove eseguirla.
Routing da filesystem e code splitting
Il routing basato su filesystem elimina la necessità di configurare un router: ogni file nella cartella pages/ diventa automaticamente una route. Un file pages/about.js corrisponde alla URL /about, un file pages/blog/[id].js gestisce route dinamiche. La convenzione sostituisce la configurazione.
Il code splitting automatico divide il bundle JavaScript per pagina: quando l’utente naviga verso /about, il browser scarica solo il codice necessario per quella pagina, non l’intera applicazione. Il risultato è un tempo di caricamento proporzionale alla complessità della singola pagina, non dell’intera applicazione.
Static export
Next.js supporta anche l’esportazione statica: l’intera applicazione può essere generata come file HTML statici durante la build, da servire su qualsiasi CDN senza un server Node.js. Il framework è rilasciato sotto licenza MIT e si posiziona come lo standard per le applicazioni React che necessitano di SSR, SEO e performance al primo caricamento.
Link: nextjs.org