React Suspense Coordination: Padronanza del Fetching Dati Parallelo

React Suspense ha rivoluzionato il modo in cui gestiamo le operazioni asincrone, in particolare il fetching dati. Permette ai componenti di "sospendere" il rendering mentre aspettano il caricamento dei dati, fornendo un modo dichiarativo per gestire gli stati di caricamento. Tuttavia, il semplice wrapping di singoli fetch di dati con Suspense può portare a un effetto cascata, in cui un fetch si completa prima che inizi il successivo, incidendo negativamente sulle prestazioni. Questo post del blog approfondisce le strategie avanzate per coordinare più fetch di dati in parallelo utilizzando Suspense, ottimizzando la reattività della tua applicazione e migliorando l'esperienza utente per un pubblico globale.

Comprendere il Problema della Cascata nel Fetching Dati

Immagina uno scenario in cui devi visualizzare il profilo di un utente con il suo nome, avatar e attività recenti. Se recuperi ogni pezzo di dati sequenzialmente, l'utente vede uno spinner di caricamento per il nome, poi un altro per l'avatar e infine uno per il feed di attività. Questo schema di caricamento sequenziale crea un effetto a cascata, ritardando il rendering del profilo completo e frustrando gli utenti. Per gli utenti internazionali con diverse velocità di rete, questo ritardo può essere ancora più pronunciato.

Considera questo snippet di codice semplificato:

function UserProfile() {
  const name = useName(); // Recupera il nome utente
  const avatar = useAvatar(name); // Recupera l'avatar basato sul nome
  const activity = useActivity(name); // Recupera l'attività basata sul nome

  return (
    <div>
      <h2>{name}</h2>
      <img src={avatar} alt="User Avatar" />
      <ul>
        {activity.map(item => <li key={item.id}>{item.text}</li>)})
      </ul>
    </div>
  );
}

In questo esempio, useAvatar e useActivity dipendono dal risultato di useName. Questo crea una chiara cascata: useAvatar e useActivity non possono iniziare a recuperare i dati finché useName non si completa. Questo è inefficiente e un comune collo di bottiglia delle prestazioni.

Strategie per il Fetching Dati Parallelo con Suspense

La chiave per ottimizzare il fetching dati con Suspense è avviare tutte le richieste di dati contemporaneamente. Ecco diverse strategie che puoi impiegare:

1. Precaricamento dei Dati con `React.preload` e Risorse

Una delle tecniche più potenti è precaricare i dati prima ancora che il componente venga renderizzato. Ciò implica la creazione di una "risorsa" (un oggetto che incapsula la promise di fetching dati) e il pre-fetching dei dati. `React.preload` aiuta in questo. Al momento in cui il componente necessita dei dati, questi sono già disponibili, eliminando quasi del tutto lo stato di caricamento.

Considera una risorsa per il recupero di un prodotto:

const createProductResource = (productId) => {
  let promise;
  let product;
  let error;

  const suspender = new Promise((resolve, reject) => {
    promise = fetch(`/api/products/${productId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        product = data;
        resolve();
      })
      .catch(e => {
        error = e;
        reject(e);
      });
  });

  return {
    read() {
      if (error) {
        throw error;
      }
      if (product) {
        return product;
      }
      throw suspender;
    },
  };
};

// Utilizzo:
const productResource = createProductResource(123);

function ProductDetails() {
  const product = productResource.read();
  return (<div>{product.name}</div>);
}

Ora, puoi precaricare questa risorsa prima che il componente ProductDetails venga renderizzato. Ad esempio, durante le transizioni di route o al passaggio del mouse.

React.preload(productResource);

Questo assicura che i dati siano probabilmente disponibili al momento in cui il componente ProductDetails li necessita, minimizzando o eliminando lo stato di caricamento.

2. Utilizzo di `Promise.all` per il Fetching Dati Concorrente

Un altro approccio semplice ed efficace è utilizzare Promise.all per avviare tutte le richieste di dati in modo concorrente all'interno di un unico boundary di Suspense. Questo funziona bene quando le dipendenze dei dati sono note in anticipo.

Riesaminiamo l'esempio del profilo utente. Invece di recuperare i dati sequenzialmente, possiamo recuperare il nome, l'avatar e il feed di attività in modo concorrente:

import { useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // Simula la chiamata API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simula la chiamata API
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simula la chiamata API
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

function Name() {
  const name = useSuspense(fetchName());
  return <h2>{name}</h2>;
}

function Avatar({ name }) {
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity({ name }) {
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)})
    </ul>
  );
}

function UserProfile() {
  const name = useSuspense(fetchName());
  return (
    <div>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

Tuttavia, se anche `Avatar` e `Activity` dipendono da `fetchName`, ma vengono renderizzati all'interno di boundary di Suspense separati, puoi elevare la promise di `fetchName` al genitore e fornirla tramite React Context.

import React, { createContext, useContext, useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // Simula la chiamata API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simula la chiamata API
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simula la chiamata API
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

const NamePromiseContext = createContext(null);

function Avatar() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)})
    </ul>
  );
}

function UserProfile() {
  const namePromise = fetchName();

  return (
    <NamePromiseContext.Provider value={namePromise}>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. Utilizzo di un Hook Personalizzato per Gestire i Fetch Paralleli

Per scenari più complessi con dipendenze di dati potenzialmente condizionali, puoi creare un hook personalizzato per gestire il fetching dati parallelo e restituire una risorsa che Suspense può utilizzare.

import { useState, useEffect, useRef } from 'react';

function useParallelData(fetchFunctions) {
  const [resource, setResource] = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const promises = fetchFunctions.map(fn => fn());

    const suspender = Promise.all(promises).then(
      (results) => {
        if (mounted.current) {
          setResource({ status: 'success', value: results });
        }
      },
      (error) => {
        if (mounted.current) {
          setResource({ status: 'error', value: error });
        }
      }
    );

    setResource({
      status: 'pending',
      value: suspender,
    });

    return () => {
      mounted.current = false;
    };
  }, [fetchFunctions]);

  const read = () => {
    if (!resource) {
      throw new Error('Resource not yet initialized');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// Esempio di utilizzo:
async function fetchUserData(userId) {
  // Simula la chiamata API
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Simula la chiamata API
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }];
}

function UserProfile({ userId }) {
  const { read } = useParallelData([
    () => fetchUserData(userId),
    () => fetchUserPosts(userId),
  ]);

  const [userData, userPosts] = read();

  return (
    <div>
      <h2>{userData.name}</h2>
      <ul>
        {userPosts.map(post => <li key={post.id}>{post.title}</li>)})
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback=<div>Loading user data...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

Questo approccio incapsula la complessità della gestione delle promise e degli stati di caricamento all'interno dell'hook, rendendo il codice del componente più pulito e più focalizzato sul rendering dei dati.

4. Idratazione Selettiva con Streaming Server Rendering

Per le applicazioni renderizzate lato server, React 18 introduce l'idratazione selettiva con streaming server rendering. Questo permette di inviare HTML al client in blocchi man mano che diventa disponibile sul server. Puoi racchiudere componenti a caricamento lento con boundary di <Suspense>, permettendo al resto della pagina di diventare interattivo mentre i componenti lenti sono ancora in fase di caricamento sul server. Questo migliora drasticamente le prestazioni percepite, specialmente per gli utenti con connessioni di rete lente o dispositivi.

Considera uno scenario in cui un sito di notizie deve visualizzare articoli da diverse regioni del mondo (ad es. Asia, Europa, Americhe). Alcune fonti dati potrebbero essere più lente di altre. L'idratazione selettiva consente di visualizzare prima gli articoli dalle regioni più veloci, mentre quelli dalle regioni più lente sono ancora in fase di caricamento, evitando che l'intera pagina venga bloccata.

Gestione di Errori e Stati di Caricamento

Mentre Suspense semplifica la gestione dello stato di caricamento, la gestione degli errori rimane cruciale. I boundary di errore (utilizzando il metodo del ciclo di vita componentDidCatch o l'hook useErrorBoundary da librerie come `react-error-boundary`) ti permettono di gestire in modo fluente gli errori che si verificano durante il fetching dati o il rendering. Questi boundary di errore dovrebbero essere posizionati strategicamente per catturare errori all'interno di specifici boundary di Suspense, evitando che l'intera applicazione vada in crash.

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  // ... recupera dati che potrebbero generare errori
}

function App() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong!</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Ricorda di fornire un'interfaccia utente di fallback informativa e user-friendly sia per gli stati di caricamento che per quelli di errore. Questo è particolarmente importante per gli utenti internazionali che potrebbero riscontrare velocità di rete più lente o interruzioni di servizio regionali.

Best Practice per Ottimizzare il Fetching Dati con Suspense

• Identifica e Prioritizza i Dati Critici: Determina quali dati sono essenziali per il rendering iniziale della tua applicazione e dai priorità al fetching di tali dati per primi.
• Precarica i Dati Quando Possibile: Utilizza `React.preload` e le risorse per precaricare i dati prima che i componenti ne abbiano bisogno, minimizzando gli stati di caricamento.
• Recupera i Dati Concorrentemente: Utilizza `Promise.all` o hook personalizzati per avviare più fetch di dati in parallelo.
• Ottimizza gli Endpoint API: Assicurati che i tuoi endpoint API siano ottimizzati per le prestazioni, minimizzando la latenza e la dimensione del payload. Considera l'uso di tecniche come GraphQL per recuperare solo i dati di cui hai bisogno.
• Implementa il Caching: Metti in cache i dati a cui si accede frequentemente per ridurre il numero di richieste API. Considera l'uso di librerie come `swr` o `react-query` per capacità di caching robuste.
• Usa Code Splitting: Suddividi la tua applicazione in blocchi più piccoli per ridurre il tempo di caricamento iniziale. Combina code splitting con Suspense per caricare e renderizzare progressivamente diverse parti della tua applicazione.
• Monitora le Prestazioni: Monitora regolarmente le prestazioni della tua applicazione utilizzando strumenti come Lighthouse o WebPageTest per identificare e affrontare i colli di bottiglia delle prestazioni.
• Gestisci gli Errori in Modo Fluido: Implementa boundary di errore per catturare errori durante il fetching dati e il rendering, fornendo messaggi di errore informativi agli utenti.
• Considera il Server-Side Rendering (SSR): Per motivi SEO e di prestazioni, considera l'uso di SSR con streaming e idratazione selettiva per offrire un'esperienza iniziale più veloce.

Conclusione

React Suspense, quando combinato con strategie per il fetching dati parallelo, fornisce un potente toolkit per costruire applicazioni reattive e performanti. Comprendendo il problema della cascata e implementando tecniche come il precaricamento, il fetching concorrente con Promise.all e hook personalizzati, puoi migliorare significativamente l'esperienza utente. Ricorda di gestire gli errori in modo fluido e monitorare le prestazioni per garantire che la tua applicazione rimanga ottimizzata per gli utenti di tutto il mondo. Poiché React continua a evolversi, l'esplorazione di nuove funzionalità come l'idratazione selettiva con streaming server rendering migliorerà ulteriormente la tua capacità di fornire esperienze utente eccezionali, indipendentemente dalla posizione o dalle condizioni di rete. Abbracciando queste tecniche, puoi creare applicazioni che non sono solo funzionali, ma anche un piacere da usare per il tuo pubblico globale.

Questo post del blog ha mirato a fornire una panoramica completa delle strategie di fetching dati parallelo con React Suspense. Speriamo che tu l'abbia trovato informativo e utile. Ti incoraggiamo a sperimentare queste tecniche nei tuoi progetti e a condividere le tue scoperte con la community.