Avviare un Nuovo Progetto React

Puoi sicuramente usare React senza un framework: è così che useresti React per una parte della tua pagina. Tuttavia, se stai creando una nuova app o un sito completamente con React, ti consigliamo di utilizzare un framework.

Ecco perché.

Anche se all’inizio potresti non aver bisogno di routing o di recupero dati, è probabile che tu voglia aggiungere alcune librerie per queste funzionalità. Con ogni nuova funzionalità, il tuo bundle JavaScript cresce e potresti dover capire come suddividere il codice per ogni singola route in modo individuale. Con esigenze di recupero dati più complesse, è probabile che incontri situazioni in cui la rete tra server e client crea un effetto di cascata che rende la tua app molto lenta. Siccome il tuo pubblico include più utenti con condizioni di rete scadenti o dispositivi di fascia bassa, potresti dover generare HTML dai tuoi componenti per mostrare il contenuto in anticipo, sia lato server che durante la fase di build. Modificare la configurazione per eseguire parte del tuo codice sul server o durante la fase di build può essere molto complicato.

Questi problemi non sono specifici di React. Questo è il motivo per cui Svelte ha SvelteKit, Vue ha Nuxt e così via. Per risolvere questi problemi da soli, sarà necessario integrare il tuo bundler con il tuo router e con la tua libreria di recupero dati. Non è difficile far funzionare una configurazione iniziale, ma ci sono molte sottigliezze coinvolte nel creare un’applicazione che si carichi rapidamente anche crescendo nel tempo. Vorrai inviare solo il minimo necessario di codice dell’applicazione, ma farlo in un unico collegamento client-server, in parallelo con i dati richiesti per la pagina. Probabilmente vorrai che la pagina sia interattiva prima ancora che il tuo codice JavaScript venga eseguito, per supportare il miglioramento progressivo. Potresti voler generare una cartella di file HTML completamente statici per le tue pagine di marketing che possono essere ospitate ovunque e funzionare ancora con JavaScript disabilitato. Costruire queste capacità da soli richiede parecchio lavoro.

I framework React presenti in questa pagina risolvono questi problemi di default, senza alcun lavoro aggiuntivo da parte tua. Ti permettono di iniziare con una configurazione leggera e poi scalare la tua app in base alle tue esigenze. Ogni framework React ha una comunità, quindi trovare risposte alle domande e aggiornare gli strumenti è più facile. Inoltre, i framework forniscono una struttura al tuo codice, aiutando te stesso e gli altri a mantenere il contesto e le competenze tra diversi progetti. Al contrario, con una configurazione personalizzata è più facile rimanere bloccati con versioni di dipendenze non supportate, e alla fine finirai per creare il tuo framework, anche se in modo meno strutturato e senza una comunità o un percorso di aggiornamento (e se è simile a quelli che abbiamo creato in passato, potrebbe essere progettato in modo più casuale).

Se la tua app ha vincoli insoliti che non sono soddisfatti da questi framework, oppure preferisci risolvere questi problemi da solo, puoi creare la tua configurazione personalizzata con React. Scarica react e react-dom da npm, configura il tuo processo di build personalizzato con un bundler come Vite o Parcel e aggiungi altri strumenti di cui hai bisogno per il routing, la generazione statica o il rendering lato server e altro ancora.

Il bundler del router dell’app di Next.js implementa completamente la specifica ufficiale dei React Server Components. Questo consente di mescolare componenti generati a tempo di build, componenti esclusivamente server-side e componenti interattivi all’interno di un singolo albero di React.

Ad esempio, è possibile scrivere un componente React esclusivamente server-side come una funzione async che legge da un database o da un file. Successivamente, è possibile passare i dati ai componenti interattivi:

// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
  // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
  const talks = await db.Talks.findAll({ confId });

  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
  const videos = talks.map(talk => talk.video);

  // 3. Pass the data down to the components that will run in the browser.
  return <SearchableVideoList videos={videos} />;
}

Il router dell’app di Next.js integra anche il recupero dei dati con Suspense.. Questo consente di specificare uno stato di caricamento (come un segnaposto scheletro) per diverse parti dell’interfaccia utente direttamente nell’albero di React:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Server Components e Suspense sono funzionalità di React che possono essere adottate a livello di framework. Al momento, il router dell’app di Next.js è l’implementazione più completa di queste funzionalità tra i vari framework. Il team di React sta anche lavorando con gli sviluppatori di bundler per rendere più semplice l’implementazione di queste funzionalità nella prossima generazione di framework.