React Server Components: Guida a Next.js 15 (Senza Mal di Testa)

Se hai aperto Twitter (o X) ultimamente, avrai notato che il mondo Frontend è nel caos. Da quando Next.js ha introdotto l’App Router e i react server components (RSC), molti sviluppatori si sentono come se dovessero reimparare tutto da zero.

“Perché non posso usare useState qui?” “Perché window è undefined?”

La verità è che i react server components non sono complicati, sono solo diversi. E una volta capiti, non vorrai più tornare indietro.

In questa guida, smonteremo l’hype e vedremo il codice reale. Capirai esattamente quando usare un Server Component (e risparmiare KB di JavaScript) e quando ti serve ancora il buon vecchio Client Component.

Perché sono nati i React Server Components?

Fino a ieri, React era interamente Client-Side. Anche se usavi il Server-Side Rendering (SSR), il browser doveva comunque scaricare tutto il JavaScript (Hydration) per rendere la pagina interattiva.

Risultato? Per mostrare un semplice articolo di blog statico, scaricavamo megabyte di librerie JS. Uno spreco enorme di banda e batteria, che spesso penalizza i Core Web Vitals (un fattore SEO cruciale).

La Soluzione: React Server Components come Default

In Next.js 15 (App Router), l’architettura cambia radicalmente: tutti i componenti sono react server components di default. Questo significa che vengono renderizzati sul server e inviati al browser come semplice HTML (o meglio, un formato dati serializzato).

Il Vantaggio Passivo: Il codice delle librerie che usi nel Server Component non finisce nel bundle del client. Usi una libreria pesante per formattare le date (come date-fns)? Se la usi nel server, l’utente scarica 0 KB di quella libreria.

Regola d’Oro: Quando usare i React Server Components?

Per padroneggiare questa architettura, devi avere chiaro il diagramma mentale di separazione delle responsabilità.

✅ Usa React Server Components per:

• Recuperare dati (Fetch dal DB o API).
• Accedere a risorse backend (File system, API Key segrete).
• Contenuto statico o che non richiede interattività immediata.

⚛️ Usa Client Components ("use client") per:

• Interattività (Click, Hover, Drag & Drop).
• Gestione dello Stato (useState, useReducer).
• Effetti (useEffect, useLayoutEffect).
• API del Browser (window, localStorage, geolocation).

Esempio Pratico: Un Blog Post

Vediamo come mixare le due tipologie. Immagina una pagina che mostra un articolo (gestito dai react server components) con un bottone “Mi piace” (Client).

1. Il Server Component (Pagina)

Niente async/await complicati nel useEffect. Qui è tutto diretto.

// app/blog/[slug]/page.tsx
import { db } from "@/lib/db";
import LikeButton from "./like-button"; // Importiamo il componente client

export default async function BlogPost({ params }: { params: { slug: string } }) {
  // 1. Fetch diretto nel componente (Sì, ora si può fare!)
  const post = await db.post.findUnique({
    where: { slug: params.slug }
  });

  return (
    <article className="prose lg:prose-xl mx-auto">
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      
      {/* 2. Inseriamo il componente interattivo */}
      <div className="mt-8">
        <LikeButton postId={post.id} initialLikes={post.likes} />
      </div>
    </article>
  );
}

// app/blog/[slug]/page.tsx
import { db } from "@/lib/db";
import LikeButton from "./like-button"; // Importiamo il componente client

export default async function BlogPost({ params }: { params: { slug: string } }) {
  // 1. Fetch diretto nel componente (Sì, ora si può fare!)
  const post = await db.post.findUnique({
    where: { slug: params.slug }
  });

  return (
    <article className="prose lg:prose-xl mx-auto">
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      
      {/* 2. Inseriamo il componente interattivo */}
      <div className="mt-8">
        <LikeButton postId={post.id} initialLikes={post.likes} />
      </div>
    </article>
  );
}

2. Il Client Component (Interattività)

Nota la direttiva "use client" in cima. È l’interruttore magico.

// app/blog/[slug]/like-button.tsx
"use client"; // <--- FONDAMENTALE

import { useState } from "react";

export default function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button 
      onClick={() => setLikes(likes + 1)}
      className="bg-blue-600 text-white px-4 py-2 rounded"
    >
      👍 Mi piace ({likes})
    </button>
  );
}

// app/blog/[slug]/like-button.tsx
"use client"; // <--- FONDAMENTALE

import { useState } from "react";

export default function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button 
      onClick={() => setLikes(likes + 1)}
      className="bg-blue-600 text-white px-4 py-2 rounded"
    >
      👍 Mi piace ({likes})
    </button>
  );
}

“Gotchas”: Gli errori comuni

Se stai cercando di migliorare le tue senior developer skills, devi conoscere queste trappole:

1. Importare Server in Client: Non puoi importare un Server Component dentro un file "use client". Ma puoi passarlo come children! (Pattern avanzato).
2. Database nel Client: Se provi a chiamare il DB dentro un componente "use client", il build fallirà (per fortuna), perché le credenziali del DB non devono finire nel browser.

Conclusione

I react server components non sono “un’altra cosa da imparare”. Sono il ritorno alla semplicità. Meno JavaScript nel client, caricamenti più veloci, SEO migliore.

Il mio consiglio? Non riscrivere le tue vecchie app domani. Ma per il prossimo progetto, Next.js 15 e RSC sono la scelta obbligata per chi vuole performance da Senior.