React 19 e i Server Components

Vasco: Ciao a tutti! Oggi io e Mario vogliamo parlarvi di una delle funzionalità più rivoluzionarie introdotte in React 19: i Server Components. Questa nuova tecnologia cambia il modo in cui le applicazioni React gestiscono il rendering e il trasferimento dei dati.

Mario: Esatto, Vasco. Con i Server Components, possiamo migliorare le performance, ridurre il bundle lato client e rendere l’esperienza utente più fluida ed efficiente.

Cos'è un Server Component?

Vasco: I Server Components sono componenti React che vengono eseguiti interamente sul server. Questo significa che non pesano sul bundle JavaScript del client e possono accedere direttamente alle risorse del server senza necessità di chiamate API aggiuntive.

Mario: Esatto. A differenza dei Client Components, che vengono eseguiti nel browser e possono gestire interazioni con l’utente, i Server Components vengono eseguiti sul server e restituiscono solo il markup da inviare al client.

Come funzionano i Server Component?

Vasco: In React 19, i Server Components non possono essere usati all'interno di un Client Component, ma un Client Component può essere figlio di un Server Component. Ecco un esempio di come strutturare i componenti:

// components/UserProfile.js (Server Component)
import db from "../lib/db";
import UserDetails from "./UserDetails";

export default async function UserProfile({ userId }) {
    const user = await db.getUser(userId);
    return (
        <div>
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <UserDetails userId={userId} />
        </div>
    );
}

// components/UserDetails.js (Client Component)
"use client";
import { useState, useEffect } from "react";

export default function UserDetails({ userId }) {
    const [details, setDetails] = useState(null);

    useEffect(() => {
        fetch(`/api/user/details/${userId}`)
            .then((res) => res.json())
            .then((data) => setDetails(data));
    }, [userId]);

    if (!details) return <p>Loading details...</p>;

    return <p>Additional Info: {details.info}</p>;
}

 In questo esempio, UserProfile è un Server Component che recupera i dati lato server, mentre UserDetails è un Client Component che gestisce aggiornamenti dinamici lato client.

Vantaggi dei Server Component

Vasco: Vediamo ora alcuni dei principali vantaggi dei Server Components:

• Migliori performance: Poiché il rendering avviene lato server, si riduce il carico di lavoro del client e si migliora il tempo di caricamento.
• Bundle più leggero: Riducendo il numero di librerie e codice eseguito nel browser, il JavaScript inviato al client diventa molto più leggero.
• Accesso diretto alle risorse server: I Server Components possono interagire direttamente con database e API senza dover gestire chiamate fetch nel client.
• Ottimizzazione SEO: Il rendering lato server aiuta i motori di ricerca a indicizzare correttamente i contenuti, migliorando il ranking delle pagine.

Come si faceva prima?

Mario: Prima dell’introduzione dei Server Components, il modo più comune per recuperare dati lato server era usare tecniche come il Server-Side Rendering (SSR) o Static Site Generation (SSG) con Next.js.

Vasco: Ecco un esempio di come avremmo fatto con SSR usando Next.js

// pages/user.js
import { getUser } from "../lib/db";

export async function getServerSideProps(context) {
    const user = await getUser(context.params.id);
    return { props: { user } };
}

export default function UserPage({ user }) {
    return (
        <div>
            <h2>{user.name}</h2>
            <p>{user.email}</p>
        </div>
    );
}

Mario: Oppure, se avessimo usato Static Site Generation (SSG)

// pages/user.js
import { getUser } from "../lib/db";

export async function getStaticProps() {
    const user = await getUser("defaultUserId");
    return { props: { user } };
}

export default function UserPage({ user }) {
    return (
        <div>
            <h2>{user.name}</h2>
            <p>{user.email}</p>
        </div>
    );
}

Vasco: In React con Client-Side Rendering (CSR), invece, si usava spesso useEffect per recuperare i dati dopo il rendering iniziale:

import { useEffect, useState } from "react";

export default function UserProfile({ userId }) {  
  const [user, setUser] = useState(null);

  useEffect(() => {  
    fetch(``/api/user/${userId}``)  
      .then((res) => res.json())  
      .then((data) => setUser(data));  
  }, [userId]);

  if (!user) return <p>Loading...</p>;

  return (  
    <div>  
      <h2>{user.name}</h2>  
      <p>{user.email}</p>  
    </div>  
  );  
}

Mario: Sebbene questo metodo funzioni, React 19 e i Server Components offrono un approccio più pulito ed efficiente, eliminando la necessità di gestire fetch e stato lato client.

Conclusioni

Vasco: In sintesi, i Server Components rappresentano un grande passo avanti per React, migliorando le performance, la gestione del codice e l’esperienza di sviluppo.

Mario: E voi? Avete già sperimentato i Server Components nei vostri progetti? Scriveteci, siamo curiosi di conoscere le vostre esperienze!