Next.js contro React? È una partnership, non una competizione

Non c'è carenza di librerie e framework JavaScript per i moderni sviluppatori web. Una delle librerie più onnipresenti è React, che Facebook (ora Meta) ha creato per aiutare a creare applicazioni ricche di funzionalità. Le applicazioni React vengono tradizionalmente eseguite nei browser Web, ma il framework Next.js estende le funzionalità di React al lato server tramite l'ambiente di runtime JavaScript Node.js.

In questo articolo, esamineremo Next.js e React in modo che tu possa decidere se sono adatti al tuo prossimo progetto.

Next.js e React: JavaScript al livello successivo

Un sondaggio SlashData del 2022 ha rilevato che ci sono più di 17 milioni di programmatori JavaScript in tutto il mondo, guidando un pacchetto che include linguaggi popolari come Python e Java. JavaScript può essere utilizzato sia sul lato client che su quello server e questa versatilità significa che gli sviluppatori possono creare applicazioni complete utilizzando un linguaggio di programmazione.

L'introduzione di librerie JavaScript come React e framework come Next.js ha ulteriormente migliorato tale sviluppo. Queste librerie e framework forniscono funzionalità che semplificano l'integrazione front-end e back-end. Inoltre, gli sviluppatori possono estendere le funzionalità JavaScript utilizzando gestori di pacchetti come npm (il gestore di pacchetti Node.js) per installare librerie e strumenti JavaScript. Queste risorse forniscono funzionalità sofisticate che riducono la quantità di codice che devi scrivere tu stesso.

L'estensibilità di JavaScript significa che una conoscenza completa dei suoi strumenti più comuni è la chiave del tuo successo come sviluppatore web.

Cos'è Next.js?

Inizialmente rilasciato nel 2016 da Vercel, Next.js è un framework React open source che fornisce gli elementi costitutivi per creare applicazioni Web ad alte prestazioni. Da allora le principali aziende lo hanno adottato, tra cui Twitch, TikTok e Uber, solo per citarne alcuni.

Next.js offre una delle migliori esperienze di sviluppo per la creazione di applicazioni veloci e ottimizzate per la SEO. Di seguito alcune caratteristiche di Next.js che lo rendono un framework di produzione eccezionale:

• Funzionalità di rendering ibrido
• Divisione automatica del codice
• Ottimizzazione dell'immagine
• Supporto integrato per preprocessori CSS e librerie CSS-in-JS
• Instradamento integrato

Queste funzionalità aiutano gli sviluppatori di Next.js a risparmiare molto tempo sulla configurazione e sugli strumenti. Puoi passare direttamente alla creazione della tua applicazione, che potrebbe supportare progetti come i seguenti:

• Negozi di e-commerce
• Blog
• Cruscotti
• Applicazioni a pagina singola
• Interagisci con le interfacce utente
• Siti web statici

Cos'è React?

React è una libreria JavaScript utilizzata per creare interfacce utente dinamiche. Oltre a creare interfacce Web, puoi creare applicazioni mobili utilizzando React Native.

Alcuni vantaggi dell'utilizzo di React includono:

• Prestazioni migliorate: invece di aggiornare ogni componente nel DOM, React utilizza un DOM virtuale per aggiornare solo i componenti modificati.
• Pesantemente basato su componenti: una volta creato un componente, puoi riutilizzarlo ripetutamente.
• Debug facile: le applicazioni React utilizzano un flusso di dati unidirezionale, solo dai componenti padre a figlio.

Next.js vs Reagire

Sebbene gli sviluppatori utilizzino spesso Next.js e React per lo stesso scopo, esistono alcune differenze fondamentali tra i due.

Facilità d'uso

È facile iniziare con Next.js e React. Ciascuno richiede l'esecuzione di singoli comandi nel terminale utilizzando npx , che fa parte di npm per Node.js.

Per Next.js, il comando più semplice è:

 npx create-next-app

Senza argomenti aggiuntivi per create-next-app , l'installazione procederà in modalità interattiva. Ti verrà chiesto il nome del progetto (che verrà utilizzato per la directory del progetto) e se desideri includere il supporto per TypeScript e il code linter ESLint.

Sarà simile a questo:

Quando si inizializza un'istanza React, il comando più semplice include un nome per la directory del progetto:

 npx create-react-app new-app

Questo genera una cartella contenente tutte le configurazioni iniziali e le dipendenze necessarie:

Sebbene entrambi semplifichino l'inizio, ricorda che Next.js è basato su React. Quindi, non puoi imparare Next.js senza prima imparare React e capire come funziona. Fortunatamente, React vanta una curva di apprendimento delicata ed è ottimo per i principianti.

È anche importante notare che React è relativamente non strutturato. Devi installare e configurare un router React e decidere come gestire il recupero dei dati, l'ottimizzazione delle immagini e la suddivisione del codice. Questa configurazione richiede l'installazione e la configurazione di librerie e strumenti aggiuntivi.

Al contrario, Next.js viene fornito con questi strumenti preinstallati e preconfigurati. Con Next.js, qualsiasi file aggiunto alla cartella delle pages funge automaticamente da percorso. Grazie a questo supporto integrato, Next.js è più facile da utilizzare quotidianamente, consentendoti di iniziare immediatamente a codificare la logica della tua applicazione.

Funzionalità Next.js e React

Poiché Next.js è basato su React, i due condividono alcune funzionalità. Tuttavia, Next.js fa un ulteriore passo avanti e include funzionalità aggiuntive come il routing, la suddivisione del codice, il pre-rendering e il supporto API fin dall'inizio. Queste sono funzionalità che dovresti configurare tu stesso quando usi React.

Recupero dati

React esegue il rendering dei dati sul lato client. Il server invia file statici al browser, quindi il browser recupera i dati dalle API per popolare l'applicazione. Questo processo riduce le prestazioni dell'app e offre un'esperienza utente scadente poiché l'app si carica lentamente. Next.js risolve questo problema attraverso il pre-rendering.

Con il pre-rendering, il server effettua le chiamate API necessarie e recupera i dati prima di inviare l'applicazione al browser. Pertanto, il browser riceve pagine Web pronte per il rendering.

Il pre-rendering può fare riferimento alla generazione di siti statici (SSG) o al rendering lato server (SSR). In SSG, le pagine HTML vengono generate al momento della compilazione e riutilizzate per più richieste. Next.js può generare pagine HTML con o senza dati.

Di seguito è riportato un esempio di come Next.js genera pagine senza dati:

 function App() { return <div>Welcome</div> } export default App

Per le pagine statiche che consumano dati esterni, utilizzare la funzione getStaticProps() . Dopo aver esportato getStaticProps() da una pagina, Next.js eseguirà il pre-rendering della pagina utilizzando gli oggetti di scena che restituisce. Questa funzione viene sempre eseguita sul server, quindi utilizzare getStaticProps() quando i dati utilizzati dalla pagina sono disponibili al momento della compilazione. Ad esempio, puoi usarlo per recuperare i post del blog da un CMS.

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

In situazioni in cui i percorsi delle pagine dipendono da dati esterni, utilizzare la funzione getStaticPaths() . Quindi, per creare un percorso basato sull'ID post, esporta getStaticPaths() dalla pagina.

Ad esempio, potresti esportare getStaticPaths() da pages/posts/[id].js come mostrato di seguito.

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

getStaticPaths() è spesso associato a getStaticProps() . In questo esempio, getStaticProps() per recuperare i dettagli dell'ID nel percorso.

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

In SSR, i dati vengono recuperati all'ora richiesta e inviati al browser. Per utilizzare SSR, esporta la funzione props getServerSide() dalla pagina di cui desideri eseguire il rendering. Il server chiama questa funzione a ogni richiesta, il che rende SSR utile per le pagine che consumano dati dinamici.

Ad esempio, puoi usarlo per recuperare dati da un'API di notizie.

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

I dati vengono recuperati su ogni richiesta e passati al componente Notizie tramite oggetti di scena.

Divisione del codice

La suddivisione del codice divide il codice in blocchi che il browser può caricare su richiesta. Riduce la quantità di codice inviato al browser durante il caricamento iniziale, poiché il server invia solo ciò di cui l'utente ha bisogno. Bundler come Webpack, Rollup e Browserify supportano la suddivisione del codice in React.

Next.js supporta la divisione del codice fuori dagli schemi.

Con Next.js, ogni pagina è suddivisa in codice e l'aggiunta di pagine all'applicazione non aumenta le dimensioni del pacchetto. Next.js supporta anche le importazioni dinamiche, che consentono di importare moduli JavaScript e caricarli dinamicamente durante il runtime. Le importazioni dinamiche contribuiscono a velocità di pagina più elevate perché i bundle vengono caricati in modo pigro.

Ad esempio, nel componente Home di seguito, il server non includerà il componente Hero nel pacchetto iniziale.

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

Invece, l'elemento di fallback della suspense verrà renderizzato prima che il componente dell'eroe venga caricato.

Supporto API in Next.js vs React

La funzione di routing dell'API Next.js ti consente di scrivere codice back-end e front-end nella stessa base di codice. Qualsiasi pagina salvata nella cartella /pages/api/ viene mappata sulla rotta /api/* e Next.js la tratta come un endpoint API.

Ad esempio, puoi creare un percorso API pages/api/user.js che restituisca il nome dell'utente corrente in questo modo:

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

Se visiti l' URL https://app-url/api/user , vedrai l'oggetto username.

 { username: 'Jane' }

Le route API sono utili quando si desidera mascherare l'URL di un servizio a cui si accede o si desidera mantenere segrete le variabili di ambiente senza codificare un'intera applicazione di back-end.

Prestazione

Next.js è senza dubbio superiore nella sua capacità di creare app più performanti con un processo semplificato. Le applicazioni SSR e SSG Next.js hanno prestazioni migliori rispetto alle applicazioni React di rendering lato client (CSR). Recuperando i dati sul server e inviando tutto ciò che il browser deve eseguire il rendering, Next.js elimina la necessità di una richiesta di recupero dei dati alle API. Ciò significa tempi di caricamento più rapidi.

Inoltre, poiché Next.js supporta il routing lato client. Il browser non deve recuperare i dati dal server ogni volta che un utente naviga su un altro percorso. Inoltre, il componente immagine Next.js consente l'ottimizzazione automatica dell'immagine. Le immagini vengono caricate solo quando entrano nel viewport. Ove possibile, Next.js offre anche immagini in formati moderni come WebP.

Next.js fornisce anche ottimizzazioni dei caratteri, precaricamento intelligente del percorso e ottimizzazioni del raggruppamento. Queste ottimizzazioni non sono automaticamente disponibili in React.

Supporto

Poiché React esiste da più tempo di Next.js, ha una community più ampia. Tuttavia, molti sviluppatori React stanno adottando Next.js, quindi la community sta crescendo costantemente. Gli sviluppatori trovano più facilmente soluzioni esistenti ai problemi che incontrano piuttosto che dover creare soluzioni da zero.

Next.js offre anche un'eccellente documentazione con esempi completi di facile comprensione. Nonostante la sua popolarità, la documentazione di React non è così navigabile.

Riepilogo

La scelta di Next.js o React dipende dai requisiti di un'applicazione.

Next.js migliora le capacità di React fornendo struttura e strumenti che migliorano le prestazioni. Questi strumenti, come il routing, la suddivisione del codice e l'ottimizzazione delle immagini, sono integrati in Next.js, il che significa che gli sviluppatori non devono configurare nulla manualmente. Grazie a queste funzionalità, Next.js è facile da usare e gli sviluppatori possono iniziare immediatamente a codificare la logica aziendale.

A causa delle diverse opzioni di rendering, Next.js è adatto per applicazioni con rendering lato server o applicazioni che combinano la generazione statica e il rendering lato server Node.js. Inoltre, grazie alla funzionalità di ottimizzazione fornita da Next.js, è perfetto per i siti che devono essere veloci, come i negozi di e-commerce.

React è una libreria JavaScript che può aiutarti a creare e ridimensionare robuste applicazioni front-end. Anche la sua sintassi è semplice, specialmente per gli sviluppatori con un background JavaScript. Inoltre, hai il controllo sugli strumenti che utilizzi nella tua applicazione e su come li configuri.

Stai pianificando la tua applicazione che domina il mondo? Approfondisci l'approccio di Kinsta all'hosting di applicazioni Node.js per i servizi che supportano React e Next.js.