Componenti Server di React: Il Futuro dello Sviluppo di React

React è stato un pilastro nello sviluppo di applicazioni web negli ultimi dieci anni.

Abbiamo tutti visto la sua evoluzione dai goffi componenti di classe all’eleganza degli hook.

Ma i Componenti Server React (RSCs)?

Non crediamo che qualcuno si aspettasse un cambiamento così drastico nel funzionamento di React.

Allora, cos’è esattamente un Componente del Server React? Come funziona? E cosa fa diversamente da ciò che React non poteva già fare?

Per rispondere a tutte queste domande, faremo rapidamente il punto sui concetti fondamentali. Se hai bisogno di un ripasso, dai un’occhiata veloce a questa guida su come imparare React da principiante.

In questo post, ti spiegheremo perché avevamo bisogno dei Componenti Server React, come funzionano e alcuni dei principali vantaggi degli RSCs.

Inizia ora!

Che Cosa Sono i Componenti Server di React?

Pensa ai Componenti Server di React come a un nuovo modo di costruire applicazioni React. Invece di essere eseguiti nel browser come i tipici componenti React, gli RSC vengono eseguiti direttamente sul tuo server.

“Penso che gli RSC siano progettati per essere la “componentizzazione” del backend, ovvero l’equivalente del backend di quello che SPA React ha fatto per il frontend. In teoria, potrebbero eliminare in gran parte la necessità di cose come REST e GraphQL, portando a un’integrazione molto più stretta tra server e client poiché un componente potrebbe attraversare l’intero stack.” — ExternalBison54 su Reddit

Poiché gli RSC eseguono direttamente sul server, possono accedere in modo efficiente a risorse backend come database e API senza un ulteriore strato di recupero dati.

Ma perché avevamo comunque bisogno degli RSC?

Per rispondere a questa domanda, facciamo un passo indietro.

React Tradizionale: Rendering Lato Client (CSR)

React è sempre stata una libreria UI lato client.

L’idea principale dietro React è di dividere il tuo intero design in unità più piccole e indipendenti a cui ci riferiamo come componenti. Questi componenti possono gestire i propri dati privati (stato) e passare dati gli uni agli altri (proprietà).

Pensa a questi componenti come a delle funzioni JavaScript che vengono scaricate ed eseguite direttamente nel browser dell’utente. Quando qualcuno visita la tua app, il suo browser scarica tutto il codice del componente, e React interviene per renderizzare tutto:

• Il browser scarica l’HTML, il JavaScript, il CSS e altre risorse.
• React analizza l’HTML, imposta gli ascoltatori di eventi per le interazioni dell’utente e recupera eventuali dati necessari.
• Il sito web si trasforma in un’applicazione React completamente funzionante proprio davanti ai tuoi occhi e tutto è gestito dal tuo browser e computer.

Anche se questo processo funziona, presenta alcuni svantaggi:

• Tempi di caricamento lenti: I tempi di caricamento possono essere lenti, soprattutto per applicazioni complesse con molti componenti, poiché ora l’utente deve aspettare che tutto venga scaricato prima.
• Peggiore per l’ottimizzazione per i motori di ricerca (SEO): L’HTML iniziale è spesso essenziale — appena sufficiente per scaricare il JavaScript che poi renderizza il resto del codice. Questo rende difficile per i motori di ricerca capire di cosa tratta la pagina.
• Diventa più lento man mano che le app crescono: L’elaborazione lato client del JavaScript può mettere sotto sforzo le risorse, portando a un’esperienza utente più problematica, specialmente man mano che si aggiungono più funzionalità.

La Prossima Iterazione: Rendering Lato Server (SSR)

Per affrontare i problemi causati dal rendering lato client, la comunità di React ha adottato il Rendering Lato Server (SSR).

Con SSR, il server gestisce il rendering del codice in HTML prima di inviarlo.

Questo HTML completo e renderizzato viene poi trasferito al tuo browser/mobile, pronto per essere visualizzato — l’app non ha bisogno di essere compilata durante l’esecuzione come sarebbe senza SSR.

Ecco come funziona l’SSR:

• Il server genera l’HTML iniziale per ogni richiesta.
• Il client riceve una struttura HTML completamente formata, consentendo un caricamento iniziale della pagina più rapido.
• Il client poi scarica React e il codice della tua applicazione, un processo chiamato “idratazione”, che rende la pagina interattiva.

La struttura HTML renderizzata sul server non ha ancora funzionalità.

React aggiunge ascoltatori di eventi, configura la gestione dello stato interno e aggiunge altre funzionalità all’HTML dopo che è stato scaricato sul tuo dispositivo. Questo processo di aggiunta di “vita” alla pagina è noto come idratazione.

Perché SSR funziona così bene?

1. Tempi di caricamento iniziali più rapidi: Gli utenti vedono il contenuto quasi istantaneamente perché il browser riceve HTML completamente formato, eliminando il tempo necessario per il caricamento e l’esecuzione del JavaScript.
2. Miglioramento SEO: I motori di ricerca scandagliano e indicizzano facilmente l’HTML renderizzato dal server. Questo accesso diretto si traduce in una migliore ottimizzazione per i motori di ricerca della tua applicazione.
3. Prestazioni migliorate su dispositivi più lenti: SSR alleggerisce il carico sul dispositivo dell’utente. Il server si fa carico del lavoro, rendendo la tua applicazione più accessibile e performante, anche su connessioni più lente.

Tuttavia, SSR ha causato una serie di problemi aggiuntivi, richiedendo una soluzione ancora migliore:

• Tempo di Interazione Lento (TTI): La renderizzazione lato server e l’idratazione ritardano la capacità dell’utente di vedere e interagire con l’app fino al completamento dell’intero processo.
• Carico del server: Il server deve lavorare di più, rallentando ulteriormente i tempi di risposta per applicazioni complesse, specialmente quando ci sono molti utenti contemporaneamente.
• Complessità della configurazione: Configurare e mantenere può essere più complesso, specialmente per grandi applicazioni.

Finalmente, i Componenti Server React

Nel dicembre 2020, il team di React ha introdotto i “Componenti Server React a Dimensione Zero” o RSCs.

Questo ha cambiato non solo il nostro modo di pensare alla costruzione di app React, ma anche come funzionano le app React dietro le quinte. Gli RSC hanno risolto molti problemi che avevamo con CSR e SSR.

“Con gli RSC, React diventa un framework completamente lato server e completamente lato client, cosa che non abbiamo mai avuto prima. E ciò permette un’integrazione molto più stretta tra il codice server e client di quanto non fosse mai stato possibile prima.” — ExternalBison54 su Reddit

Vediamo ora i vantaggi che gli RSC offrono:

1. Dimensione Del Pacchetto Zero

Gli RSC sono renderizzati interamente sul server, eliminando la necessità di inviare codice JavaScript al client. Questo comporta:

• Dimensioni del pacchetto JavaScript drasticamente ridotte.
• Caricamenti della pagina più veloci, in particolare su reti più lente.
• Prestazioni migliorate su dispositivi meno potenti.

A differenza di SSR, dove l’intero albero dei componenti React viene inviato al cliente per l’idratazione, gli RSC mantengono il codice solo-server sul server. Questo porta a quei pacchetti lato-client significativamente più piccoli di cui abbiamo parlato, rendendo le tue applicazioni più leggere e reattive.

2. Accesso Diretto al Backend

Gli RSC possono interagire direttamente con database e sistemi di file senza richiedere un livello API.

Come puoi vedere nel codice qui sotto, la variabile courses è recuperata direttamente dal database, e l’interfaccia utente stampa un elenco degli course.id e course.name provenienti dal courses.map:

async function CourseList() {
  const db = await connectToDatabase();
  const courses = await db.query('SELECT * FROM courses');

  return (
    <ul>
      {courses.map(course => (
        <li key={course.id}>{course.name}</li>
      ))}
    </ul>
  );
}

Questo è più semplice rispetto al tradizionale SSR in cui dovresti configurare percorsi API separati per il recupero di singoli pezzi di dati.

3. Suddivisione Automatica del Codice

Con gli RSC, ottieni anche una suddivisione del codice più granulare e una migliore organizzazione del codice.

React mantiene il codice esclusivamente server sul server e garantisce che non venga mai inviato al client. I componenti del client vengono identificati automaticamente e inviati al client per l’idratazione.

E il pacchetto complessivo diventa estremamente ottimizzato poiché il cliente riceve esattamente ciò che è necessario per un’app completamente funzionante.

D’altra parte, SSR richiede una suddivisione manuale attenta del codice per ottimizzare le prestazioni per ogni pagina aggiuntiva.

4. Riduzione dell’Effetto Cascata e Rendering Streaming

I Componenti Server di React combinano la renderizzazione in streaming e il recupero parallelo dei dati. Questa potente combinazione riduce significativamente l’effetto “cascata” spesso osservato nella renderizzazione lato server tradizionale.

Effetto Cascata

L'”effetto cascata” rallenta lo sviluppo web. Fondamentalmente, costringe le operazioni a seguire l’una dopo l’altra come se una cascata scorresse su una serie di rocce.

Ogni passaggio deve attendere che il precedente sia completato. Questa “attesa” è particolarmente evidente nel recupero dei dati. Una chiamata API deve essere completata prima che possa iniziare la successiva, causando un rallentamento dei tempi di caricamento della pagina.

Rendering dello Streaming

Il rendering in streaming offre una soluzione. Invece di attendere che l’intera pagina venga renderizzata sul server, il server può inviare pezzi dell’interfaccia utente al client non appena sono pronti.

I Componenti Server di React rendono il rendering e il recupero dei dati molto più fluidi. Crea più componenti server che lavorano in parallelo evitando questo effetto cascata.

Il server inizia a inviare HTML al cliente non appena una parte dell’interfaccia utente è pronta.

Allora, rispetto al rendering lato server, gli RSC:

• Permetti a ciascun componente di recuperare i suoi dati in modo indipendente e in parallelo.
• Il server può trasmettere un componente non appena i suoi dati sono pronti, senza aspettare che gli altri componenti siano allineati.
• Gli utenti vedono il contenuto caricarsi uno dopo l’altro, migliorando la loro percezione delle prestazioni.

5. Interazione Fluida Con i Componenti del Cliente

Ora, l’utilizzo degli RSCs non implica necessariamente che tu debba rinunciare a usare i componenti lato client. 

Entrambi i componenti possono coesistere e aiutarti a creare un’ottima esperienza complessiva dell’app.

Pensa a un’applicazione e-commerce. Con SSR, l’intera app deve essere renderizzata sul lato server.

Negli RSCs, tuttavia, puoi selezionare quali componenti renderizzare sul server e quali sul lato client.

Ad esempio, potresti utilizzare i componenti del server per recuperare i dati del prodotto e renderizzare la pagina iniziale dell’elenco dei prodotti.

Poi, i componenti del client possono gestire interazioni dell’utente come aggiungere articoli al carrello della spesa o gestire recensioni dei prodotti.

Dovresti Aggiungere L’Implementazione RSC Alla Tua Roadmap?

Il nostro verdetto? Gli RSC aggiungono moltissimo valore allo sviluppo in React.

Risolvono alcuni dei problemi più urgenti con gli approcci SSR e CSR: prestazioni, recupero dati ed esperienza dello sviluppatore. Per gli sviluppatori che stanno iniziando a programmare, questo ha semplificato la vita.

Ora, dovresti aggiungere l’implementazione RSC al tuo piano di sviluppo? Dovremo ricorrere al temuto – dipende.

La tua app potrebbe funzionare perfettamente senza RSC. E in questo caso, aggiungere un altro livello di astrazione potrebbe non fare molto. Tuttavia, se prevedi di scalare e pensi che gli RSC possano migliorare l’esperienza utente della tua app, prova a fare piccole modifiche e a scalare da lì.

E se hai bisogno di un server potente per testare RSC, avvia un DreamHost VPS.

DreamHost offre un servizio VPS completamente gestito dove puoi distribuire anche le tue applicazioni più esigenti senza preoccuparti della manutenzione del server.