Data Fetching in Next.js: Server Components e Database

Introduzione

Questo capitolo esplora le diverse strategie per recuperare dati in applicazioni Next.js. Analizziamo i vantaggi del data fetching nei Server Components rispetto al client-side, come accedere direttamente a database e altre risorse server-side, e come gestire efficacemente gli stati di loading utilizzando loading.js e il componente Suspense di React.

Comprendere questi pattern è fondamentale per costruire applicazioni Next.js performanti e con una buona esperienza utente.

Strategie di Data Fetching

In Next.js esistono diverse strategie per recuperare dati, ognuna con i propri vantaggi e casi d’uso:

1. Client-side fetching: utilizzando useEffect e fetch nel browser
2. Server-side fetching: utilizzando Server Components con async/await
3. Accesso diretto a database: quando si possiede il database, evitando HTTP requests

La scelta della strategia dipende dalla struttura dell’applicazione e dalla posizione della sorgente dati.

Client-Side Data Fetching

Il data fetching lato client è l’approccio tradizionale nelle applicazioni React. Utilizza useEffect e fetch per recuperare dati dopo che il componente è stato renderizzato nel browser.

Implementazione Base

1
'use client'
2

3
import { useState, useEffect } from 'react'
4

5
export default function NewsPage() {
6
  const [news, setNews] = useState([])
7
  const [isLoading, setIsLoading] = useState(true)
8
  const [error, setError] = useState(null)
9

10
  useEffect(() => {
11
    async function fetchNews() {
12
      try {
13
        setIsLoading(true)
14
        const response = await fetch('http://localhost:8080/news')
15

16
        if (!response.ok) {
17
          throw new Error('Failed to fetch news')
18
        }
19

20
        const data = await response.json()
21
        setNews(data)
22
      } catch (err) {
23
        setError(err.message)
24
      } finally {
25
        setIsLoading(false)
26
      }
27
    }
28

29
    fetchNews()
30
  }, [])
31

32
  if (isLoading) {
33
    return <p>Loading...</p>
34
  }
35

36
  if (error) {
37
    return <p>Error: {error}</p>
38
  }
39

40
  return <NewsList news={news} />
41
}

Limitazioni del Client-Side Fetching

Questo approccio presenta alcuni svantaggi:

• SEO: il contenuto non è presente nell’HTML iniziale, peggiorando l’indicizzazione
• Performance: il JavaScript deve essere scaricato ed eseguito prima del fetching
• User Experience: possibile “flash” di contenuto vuoto durante il caricamento
• Client Component: richiede 'use client', aumentando il bundle JavaScript

Quando si ispeziona il codice sorgente della pagina, il contenuto dei dati non è presente perché viene aggiunto solo dopo il rendering lato client.

Server-Side Data Fetching con Server Components

Next.js permette di recuperare dati direttamente nei Server Components, che vengono eseguiti esclusivamente sul server. Questo approccio è preferibile quando possibile.

Fetching da API Esterne

1
// app/news/page.js - Server Component (default)
2
export default async function NewsPage() {
3
  const response = await fetch('http://localhost:8080/news')
4

5
  if (!response.ok) {
6
    throw new Error('Failed to fetch news')
7
  }
8

9
  const news = await response.json()
10

11
  return <NewsList news={news} />
12
}

Vantaggi:

• Il contenuto è presente nell’HTML iniziale, migliorando SEO
• Nessun JavaScript aggiuntivo necessario per il fetching
• Migliore performance: il rendering avviene sul server
• Codice più semplice: nessun useEffect o gestione dello stato

Funzione Fetch Estesa da Next.js

Next.js estende la funzione fetch standard aggiungendo funzionalità di caching e ottimizzazione. La funzione è disponibile sia nel browser che in Node.js, rendendola utilizzabile nei Server Components.

1
export default async function NewsPage() {
2
  // Next.js estende fetch con caching automatico
3
  const response = await fetch('http://localhost:8080/news', {
4
    // Opzioni di caching (vedremo più avanti)
5
    next: { revalidate: 3600 }
6
  })
7

8
  const news = await response.json()
9
  return <NewsList news={news} />
10
}

Accesso Diretto a Database

Quando si possiede il database e non è necessario un server API separato, è possibile accedere direttamente al database dai Server Components. Questo elimina il round-trip HTTP e migliora le prestazioni.

Configurazione del Database

1
import sql from 'better-sqlite3'
2

3
const db = sql('data.db')
4

5
export async function getAllNews() {
6
  // Simula un delay per dimostrare loading states
7
  await new Promise(resolve => setTimeout(resolve, 2000))
8

9
  const news = db.prepare('SELECT * FROM news').all()
10
  return news
11
}
12

13
export function getNewsItem(slug) {
14
  const newsItem = db.prepare('SELECT * FROM news WHERE slug = ?').get(slug)
15
  return newsItem
16
}
17

18
export async function getNewsForYear(year) {
19
  await new Promise(resolve => setTimeout(resolve, 1000))
20

21
  const news = db.prepare(`
22
    SELECT * FROM news
23
    WHERE strftime('%Y', date) = ?
24
  `).all(year)
25

26
  return news
27
}

Utilizzo nei Componenti

1
import { getAllNews } from '@/lib/news'
2

3
export default async function NewsPage() {
4
  const news = await getAllNews()
5

6
  return <NewsList news={news} />
7
}

1
import { getNewsItem } from '@/lib/news'
2
import { notFound } from 'next/navigation'
3

4
export default async function NewsDetailPage({ params }) {
5
  const newsItem = await getNewsItem(params.slug)
6

7
  if (!newsItem) {
8
    notFound()
9
  }
10

11
  return (
12
    <article>
13
      <h1>{newsItem.title}</h1>
14
      <p>{newsItem.content}</p>
15
    </article>
16
  )
17
}

Vantaggi dell’accesso diretto al database:

• Performance: nessun overhead HTTP
• Sicurezza: credenziali database non esposte al client
• Semplicità: codice più diretto senza layer API intermedio
• Efficienza: query SQL ottimizzate direttamente

Gestione degli Stati di Loading

Next.js fornisce diversi meccanismi per gestire gli stati di caricamento durante il data fetching.

File loading.js

Il file loading.js è il modo più semplice per aggiungere un loading fallback a una route:

1
export default function NewsLoading() {
2
  return <p>Loading news...</p>
3
}

Questo componente viene mostrato automaticamente mentre la pagina o i componenti annidati stanno caricando dati.

Comportamento:

• Si attiva quando si naviga verso la route per la prima volta
• Non si attiva quando si ricarica la stessa route (a causa del caching)
• Si applica a tutte le route annidate nella stessa cartella

Loading Fallback Annidati

È possibile creare loading fallback più specifici per route annidate:

1
export default function NewsItemLoading() {
2
  return <p>Loading news item...</p>
3
}

Quando si naviga verso /news/[slug], viene mostrato questo loading fallback più specifico invece di quello del parent.

Suspense per Loading Granulare

Il componente Suspense di React permette un controllo più granulare sugli stati di loading, mostrando fallback per parti specifiche della pagina invece che per l’intera pagina.

1
import { Suspense } from 'react'
2
import { getAllNews } from '@/lib/news'
3

4
async function NewsList() {
5
  const news = await getAllNews()
6
  return <NewsListComponent news={news} />
7
}
8

9
export default function NewsPage() {
10
  return (
11
    <main>
12
      <header>
13
        <h1>News</h1>
14
      </header>
15
      <Suspense fallback={<p>Loading news...</p>}>
16
        <NewsList />
17
      </Suspense>
18
    </main>
19
  )
20
}

Vantaggi di Suspense:

• Granularità: loading fallback solo per componenti specifici
• Streaming: il contenuto viene mostrato non appena è disponibile
• Indipendenza: multiple Suspense boundaries non si aspettano l’una con l’altra

Multiple Suspense Boundaries

È possibile utilizzare più Suspense boundaries sulla stessa pagina per gestire il loading di diverse sezioni indipendentemente:

1
import { Suspense } from 'react'
2

3
async function FilterHeader({ year, month }) {
4
  const availableYears = await getAvailableNewsYears()
5
  // ... logica per il filtro
6
  return <nav>{/* Links */}</nav>
7
}
8

9
async function FilteredNews({ year, month }) {
10
  let news = undefined
11

12
  if (year && !month) {
13
    news = await getNewsForYear(year)
14
  } else if (year && month) {
15
    news = await getNewsForYearAndMonth(year, month)
16
  }
17

18
  return news && news.length > 0 ? (
19
    <NewsList news={news} />
20
  ) : (
21
    <p>No news found.</p>
22
  )
23
}
24

25
export default async function ArchivePage({ params }) {
26
  const filter = params.filter
27
  const selectedYear = filter?.[0]
28
  const selectedMonth = filter?.[1]
29

30
  return (
31
    <>
32
      <Suspense fallback={<p>Loading filter...</p>}>
33
        <FilterHeader year={selectedYear} month={selectedMonth} />
34
      </Suspense>
35

36
      <Suspense fallback={<p>Loading news...</p>}>
37
        <FilteredNews year={selectedYear} month={selectedMonth} />
38
      </Suspense>
39
    </>
40
  )
41
}

Ogni Suspense boundary gestisce il proprio loading state indipendentemente, permettendo di mostrare contenuto non appena è disponibile senza aspettare che tutto il contenuto sia caricato.

Pattern: Convertire Client Components in Server Components

Quando un componente deve essere un Client Component per una funzionalità specifica (ad esempio, useRouter), ma ha bisogno anche di fare data fetching, è possibile separare le responsabilità:

Problema: Client Component con Data Fetching

1
'use client'
2

3
import { useRouter } from 'next/navigation'
4
import { getNewsItem } from '@/lib/news'
5

6
export default function InterceptedImagePage({ params }) {
7
  const router = useRouter()
8
  const newsItem = await getNewsItem(params.slug) // ❌ Non funziona!
9

10
  return (
11
    <div onClick={() => router.back()}>
12
      <img src={newsItem.image} alt={newsItem.title} />
13
    </div>
14
  )
15
}

Soluzione: Separare le Responsabilità

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

4
import { useRouter } from 'next/navigation'
5

6
export default function ModalBackdrop({ children }) {
7
  const router = useRouter()
8

9
  return (
10
    <div
11
      className="modal-backdrop"
12
      onClick={() => router.back()}
13
    >
14
      {children}
15
    </div>
16
  )
17
}

1
// app/news/[slug]/(.)image/page.js - Server Component
2
import { getNewsItem } from '@/lib/news'
3
import { notFound } from 'next/navigation'
4
import ModalBackdrop from '@/components/ModalBackdrop'
5

6
export default async function InterceptedImagePage({ params }) {
7
  const newsItem = await getNewsItem(params.slug)
8

9
  if (!newsItem) {
10
    notFound()
11
  }
12

13
  return (
14
    <ModalBackdrop>
15
      <img src={newsItem.image} alt={newsItem.title} />
16
    </ModalBackdrop>
17
  )
18
}

Questo pattern mantiene il componente principale come Server Component, permettendo il data fetching, mentre il codice che richiede funzionalità client-side viene isolato in un componente separato.

Migrazione da Dummy Data a Database

Quando si migra un’applicazione da dati hardcoded a un database, è importante:

1. Creare funzioni di accesso ai dati: centralizzare la logica di accesso al database
2. Mantenere la stessa struttura dati: assicurarsi che i dati dal database abbiano la stessa struttura dei dati dummy
3. Aggiornare tutti i componenti: sostituire i riferimenti ai dati dummy con chiamate alle funzioni di database
4. Gestire loading states: aggiungere loading fallback appropriati

1
// lib/news.js - Funzioni centralizzate
2
import sql from 'better-sqlite3'
3

4
const db = sql('data.db')
5

6
export async function getAllNews() {
7
  await new Promise(resolve => setTimeout(resolve, 2000))
8
  return db.prepare('SELECT * FROM news').all()
9
}
10

11
export async function getNewsItem(slug) {
12
  await new Promise(resolve => setTimeout(resolve, 1000))
13
  return db.prepare('SELECT * FROM news WHERE slug = ?').get(slug)
14
}
15

16
export async function getLatestNews() {
17
  await new Promise(resolve => setTimeout(resolve, 1500))
18
  return db.prepare(`
19
    SELECT * FROM news
20
    ORDER BY date DESC
21
    LIMIT 3
22
  `).all()
23
}
24

25
export async function getNewsForYear(year) {
26
  await new Promise(resolve => setTimeout(resolve, 1000))
27
  return db.prepare(`
28
    SELECT * FROM news
29
    WHERE strftime('%Y', date) = ?
30
  `).all(year)
31
}
32

33
export async function getNewsForYearAndMonth(year, month) {
34
  await new Promise(resolve => setTimeout(resolve, 1000))
35
  return db.prepare(`
36
    SELECT * FROM news
37
    WHERE strftime('%Y', date) = ?
38
    AND strftime('%m', date) = ?
39
  `).all(year, month.padStart(2, '0'))
40
}
41

42
export async function getAvailableNewsYears() {
43
  return db.prepare(`
44
    SELECT DISTINCT strftime('%Y', date) as year
45
    FROM news
46
    ORDER BY year DESC
47
  `).all().map(row => row.year)
48
}
49

50
export async function getAvailableNewsMonths(year) {
51
  return db.prepare(`
52
    SELECT DISTINCT strftime('%m', date) as month
53
    FROM news
54
    WHERE strftime('%Y', date) = ?
55
    ORDER BY month DESC
56
  `).all(year).map(row => row.month)
57
}

Best Practices

Quando Usare Client-Side Fetching

Utilizzare il client-side fetching quando:

• Si recuperano dati da API esterne che non si controllano
• I dati devono essere aggiornati frequentemente senza ricaricare la pagina
• Si implementa polling o real-time updates
• Si gestisce autenticazione lato client

Quando Usare Server-Side Fetching

Preferire il server-side fetching quando:

• Si possiede il database o la sorgente dati
• SEO è importante
• Si vogliono migliori performance iniziali
• Si gestiscono dati sensibili

Gestione degli Errori

Sempre gestire potenziali errori durante il data fetching:

1
export default async function NewsPage() {
2
  try {
3
    const news = await getAllNews()
4
    return <NewsList news={news} />
5
  } catch (error) {
6
    throw new Error('Failed to load news')
7
  }
8
}

Gli errori possono essere gestiti con file error.js appropriati.

Tipi di Dati

Quando si lavora con database, prestare attenzione ai tipi di dati:

1
// I valori dal database potrebbero essere stringhe
2
const availableYears = await getAvailableNewsYears() // ['2024', '2023']
3

4
// Assicurarsi di confrontare tipi corretti
5
if (availableYears.includes(selectedYear)) { // selectedYear è stringa
6
  // ...
7
}

Conclusione

Il data fetching in Next.js offre diverse strategie, ognuna con i propri vantaggi:

• Server Components permettono di recuperare dati direttamente sul server, migliorando SEO e performance
• Accesso diretto al database elimina overhead HTTP quando si possiede la sorgente dati
• Loading states possono essere gestiti con loading.js o Suspense per un controllo più granulare
• Pattern di separazione permettono di mantenere Server Components anche quando alcune parti richiedono funzionalità client-side

Comprendere questi pattern permette di costruire applicazioni Next.js efficienti, performanti e con una buona esperienza utente.