React Server Components e Feature Avanzate

Introduzione

Alcune feature di React, come React Server Components, Server Actions e il hook use() con Promises, richiedono setup di progetto speciali che supportano l’esecuzione di codice lato server. Queste feature non sono disponibili in progetti React standard come quelli creati con Vite, ma sono supportate da framework come Next.js. Questo articolo esplora come funzionano queste feature avanzate e come utilizzarle insieme.

Perché Alcune Feature Richiedono Setup Speciali

React Server Components e Server Actions richiedono che il codice sia eseguito sul server, non solo nel browser. I progetti React standard eseguono tutto nel browser, quindi serve un setup che separi automaticamente il codice in due pacchetti: uno per il server e uno per il client, con un ambiente server per eseguire il codice che non deve girare nel browser.

Framework come Next.js forniscono questo setup, permettendo di utilizzare queste feature avanzate.

React Server Components vs Client Components

Server Components

I React Server Components sono componenti che non vengono mai eseguiti sul client. Il codice di questi componenti non arriva mai al client: vengono eseguiti sul server durante il build o quando una richiesta arriva al server.

1
// RSCDemo.js - Server Component (default in Next.js)
2
function RSCDemo() {
3
  console.log('Questo log appare solo sul server')
4
  return <div>Server Component</div>
5
}

Vantaggi dei Server Components:

• Meno codice al client: il codice non viene inviato al browser
• Data fetching sul server: possibilità di fetch dati direttamente nel componente
• Supporto async/await: i Server Components possono essere funzioni async

Client Components

I Client Components vengono renderizzati sia sul server (pre-rendering) che sul client. Sul server generano HTML iniziale, poi vengono eseguiti nuovamente sul client per permettere interattività.

Per convertire un componente in Client Component, si aggiunge la direttiva 'use client' all’inizio del file:

1
// ClientDemo.js - Client Component
2
'use client'
3

4
import { useState } from 'react'
5

6
function ClientDemo() {
7
  const [count, setCount] = useState(0)
8

9
  console.log('Questo log appare sia sul server che sul client')
10

11
  return (
12
    <div>
13
      <button onClick={() => setCount(count + 1)}>
14
        Increment
15
      </button>
16
      <span>{count}</span>
17
    </div>
18
  )
19
}

I Client Components sono necessari quando si utilizzano:

• Hook di React come useState, useEffect, useContext
• Event handlers come onClick, onChange
• Browser APIs come localStorage, window

Combinare Server e Client Components

Esistono regole specifiche per combinare Server e Client Components:

Server Component → Client Component

Un Server Component può includere direttamente un Client Component nel suo JSX:

1
// Server Component
2
import ClientDemo from './ClientDemo'
3

4
function ServerComponent() {
5
  return (
6
    <div>
7
      <ClientDemo /> {/* Funziona */}
8
    </div>
9
  )
10
}

Client Component → Server Component

Un Client Component non può includere direttamente un Server Component nel suo JSX, con un’eccezione: può accettare Server Components come children.

1
// ❌ Non funziona
2
'use client'
3
import ServerComponent from './ServerComponent'
4

5
function ClientComponent() {
6
  return <ServerComponent /> // Errore
7
}
8

9
// ✅ Funziona con children
10
'use client'
11
function ClientComponent({ children }) {
12
  return <div>{children}</div>
13
}
14

15
// Nel Server Component padre
16
function Page() {
17
  return (
18
    <ClientComponent>
19
      <ServerComponent /> {/* Funziona come children */}
20
    </ClientComponent>
21
  )
22
}

1
// Server Component con async
2
async function ServerComponent() {
3
  const data = await fetchData()
4
  return <div>{data}</div>
5
}
6

7
// Se questo viene usato in un Client Component senza async,
8
// viene convertito automaticamente
9
// Con async, rimane Server Component e genera errore se usato direttamente

Data Fetching con Server Components

I Server Components semplificano il data fetching perché il codice viene eseguito sul server, dove si può utilizzare codice Node.js e async/await:

1
// DataFetchingDemo.js - Server Component
2
import fs from 'fs/promises'
3

4
async function DataFetchingDemo() {
5
  // Codice Node.js eseguito solo sul server
6
  const fileContent = await fs.readFile('dummy-db.json', 'utf-8')
7
  const users = JSON.parse(fileContent)
8

9
  return (
10
    <ul>
11
      {users.map(user => (
12
        <li key={user.id}>{user.name}</li>
13
      ))}
14
    </ul>
15
  )
16
}

Vantaggi rispetto a useEffect e fetch:

• Nessun loading state manuale: i dati sono già disponibili quando il componente viene renderizzato
• Codice più semplice: nessun useEffect, nessuna gestione di loading/error state
• Migliori performance: i dati vengono fetchati sul server e inclusi nell’HTML iniziale

Server Actions

Le Server Actions sono form actions eseguite sul server. Si creano aggiungendo la direttiva 'use server' a una funzione async:

1
// ServerActionsDemo.js - Server Component
2
async function ServerActionsDemo() {
3
  async function saveUserAction(formData) {
4
    'use server'
5

6
    const name = formData.get('name')
7
    const email = formData.get('email')
8

9
    // Codice eseguito solo sul server
10
    console.log('Eseguito sul server')
11

12
    // Salvataggio dati
13
    await saveUser({ name, email })
14
  }
15

16
  return (
17
    <form action={saveUserAction}>
18
      <input name="name" />
19
      <input name="email" />
20
      <button type="submit">Save User</button>
21
    </form>
22
  )
23
}

Regole per Server Actions

1. Non possono essere definite in Client Components: se un file ha 'use client', non può contenere 'use server' nella stessa funzione
2. Possono essere usate in Client Components: si possono definire in file separati e importarle

1
'use server'
2

3
export async function saveUserAction(formData) {
4
  // Codice server
5
}
6

7
// ClientComponent.js
8
'use client'
9
import { saveUserAction } from './actions/users'
10

11
function ClientComponent() {
12
  return (
13
    <form action={saveUserAction}>
14
      {/* Form */}
15
    </form>
16
  )
17
}

Suspense e Data Fetching

Il componente Suspense di React può essere usato con Server Components per mostrare un fallback durante il caricamento dei dati:

1
// UsePromisesDemo.js - Server Component
2
async function UsePromisesDemo() {
3
  // Simula delay nel fetching
4
  await new Promise(resolve => setTimeout(resolve, 2000))
5

6
  const users = await fetchUsers()
7

8
  return (
9
    <ul>
10
      {users.map(user => (
11
        <li key={user.id}>{user.name}</li>
12
      ))}
13
    </ul>
14
  )
15
}
16

17
// page.js - Server Component
18
import { Suspense } from 'react'
19
import UsePromisesDemo from './UsePromisesDemo'
20

21
function Page() {
22
  return (
23
    <div>
24
      <h1>Users</h1>
25
      <Suspense fallback={<p>Loading...</p>}>
26
        <UsePromisesDemo />
27
      </Suspense>
28
    </div>
29
  )
30
}

Con Suspense, la pagina carica immediatamente mostrando il fallback, mentre i dati vengono fetchati in background. Questo migliora l’esperienza utente rispetto al caricamento completo della pagina.

Il Hook use() con Promises

Il hook use() può essere usato per attendere Promises in Client Components senza async/await. Funziona solo con Promises create da librerie che si integrano con Suspense o con Promises create in Server Components e passate come props.

1
// page.js - Server Component
2
async function Page() {
3
  // Promise creata nel Server Component
4
  const fetchUsersPromise = new Promise((resolve) => {
5
    setTimeout(async () => {
6
      const users = await fetchUsers()
7
      resolve(users)
8
    }, 2000)
9
  })
10

11
  return (
12
    <Suspense fallback={<p>Loading...</p>}>
13
      <UsePromisesDemo usersPromise={fetchUsersPromise} />
14
    </Suspense>
15
  )
16
}
17

18
// UsePromisesDemo.js - Client Component
19
'use client'
20
import { use, useState } from 'react'
21

22
function UsePromisesDemo({ usersPromise }) {
23
  const [count, setCount] = useState(0)
24

25
  // use() attende la Promise sul client
26
  const users = use(usersPromise)
27

28
  return (
29
    <div>
30
      <button onClick={() => setCount(count + 1)}>
31
        Increment: {count}
32
      </button>
33
      <ul>
34
        {users.map(user => (
35
          <li key={user.id}>{user.name}</li>
36
        ))}
37
      </ul>
38
    </div>
39
  )
40
}

Il hook use():

• Funziona solo con Promises compatibili con Suspense
• Si integra con Suspense per mostrare il fallback durante l’attesa
• Permette di utilizzare Promises in Client Components senza async/await

ErrorBoundary con Suspense

Gli ErrorBoundary possono essere combinati con Suspense per gestire errori durante il data fetching:

1
// ErrorBoundary.js - Class Component
2
class ErrorBoundary extends React.Component {
3
  constructor(props) {
4
    super(props)
5
    this.state = { hasError: false, error: null }
6
  }
7

8
  static getDerivedStateFromError(error) {
9
    return { hasError: true, error }
10
  }
11

12
  render() {
13
    if (this.state.hasError) {
14
      return (
15
        <div>
16
          <p>{this.state.error.message}</p>
17
          {this.props.fallback}
18
        </div>
19
      )
20
    }
21

22
    return this.props.children
23
  }
24
}
25

26
// page.js
27
function Page() {
28
  return (
29
    <ErrorBoundary fallback={<p>Something went wrong</p>}>
30
      <Suspense fallback={<p>Loading...</p>}>
31
        <UsePromisesDemo />
32
      </Suspense>
33
    </ErrorBoundary>
34
  )
35
}

Questa combinazione fornisce:

• Suspense: gestisce lo stato di loading
• ErrorBoundary: gestisce gli errori durante il fetching
• Component: gestisce il rendering dei dati

Riepilogo

React Server Components, Server Actions e il hook use() sono feature avanzate di React che richiedono setup di progetto speciali. I Server Components vengono eseguiti solo sul server e semplificano il data fetching. I Client Components vengono eseguiti sia sul server che sul client e permettono l’utilizzo di hook e browser APIs. Le Server Actions permettono di eseguire codice server nelle form actions. Il hook use() permette di attendere Promises in Client Components quando integrate con Suspense. Queste feature lavorano insieme per creare applicazioni React performanti con data fetching efficiente e gestione degli stati di loading ed errori.