React Suspense Coördinatie: Parallelle Gegevensophaling Meesteren

React Suspense heeft een revolutie teweeggebracht in de manier waarop we asynchrone bewerkingen afhandelen, met name data-ophaling. Het stelt componenten in staat om het renderen te "opschorten" terwijl ze wachten op het laden van gegevens, wat een declaratieve manier biedt om laadtoestanden te beheren. Echter, simpelweg individuele data-ophalingen inpakken met Suspense kan leiden tot een waterval effect, waarbij de ene ophaalopdracht voltooid is voordat de volgende begint, wat een negatieve invloed heeft op de prestaties. Deze blogpost duikt in geavanceerde strategieën voor het coördineren van meerdere data-ophalingen parallel met behulp van Suspense, waardoor de responsiviteit van uw applicatie wordt geoptimaliseerd en de gebruikerservaring voor een wereldwijd publiek wordt verbeterd.

De Waterval Probleem Begrijpen bij Data-ophaling

Stel je een scenario voor waarin je een gebruikersprofiel moet weergeven met hun naam, avatar en recente activiteit. Als je elk stukje data sequentieel ophaalt, ziet de gebruiker een laadspinner voor de naam, dan nog een voor de avatar en uiteindelijk een voor de activiteitfeed. Dit sequentiële laadpatroon creëert een waterval effect, waardoor de rendering van het complete profiel wordt vertraagd en gebruikers worden gefrustreerd. Voor internationale gebruikers met verschillende netwerksnelheden kan deze vertraging nog uitgesprokener zijn.

Bekijk dit vereenvoudigde codefragment:

function UserProfile() {
  const name = useName(); // Haalt gebruikersnaam op
  const avatar = useAvatar(name); // Haalt avatar op op basis van naam
  const activity = useActivity(name); // Haalt activiteit op op basis van naam

  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 dit voorbeeld zijn useAvatar en useActivity afhankelijk van het resultaat van useName. Dit creëert een duidelijke waterval – useAvatar en useActivity kunnen pas beginnen met het ophalen van data als useName voltooid is. Dit is inefficiënt en een veelvoorkomende bottleneck voor de prestaties.

Strategieën voor Parallelle Data-ophaling met Suspense

De sleutel tot het optimaliseren van data-ophaling met Suspense is om alle data-aanvragen gelijktijdig te initiëren. Hier zijn verschillende strategieën die je kunt gebruiken:

1. Gegevens vooraf laden met `React.preload` en Resources

Een van de krachtigste technieken is om gegevens vooraf te laden voordat de component überhaupt wordt weergegeven. Dit houdt in dat je een "resource" maakt (een object dat de promise voor het ophalen van gegevens inkapselt) en de gegevens vooraf ophaalt. `React.preload` helpt hierbij. Tegen de tijd dat de component de gegevens nodig heeft, zijn ze al beschikbaar, waardoor de laadtoestand vrijwel volledig wordt geëlimineerd.

Beschouw een resource voor het ophalen van een product:

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;
    },
  };
};

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

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

Nu kun je deze resource vooraf laden voordat de ProductDetails component wordt weergegeven. Bijvoorbeeld tijdens route-overgangen of bij hover.

React.preload(productResource);

Dit zorgt ervoor dat de gegevens waarschijnlijk beschikbaar zijn tegen de tijd dat de ProductDetails component ze nodig heeft, waardoor de laadtoestand wordt geminimaliseerd of geëlimineerd.

2. `Promise.all` gebruiken voor Gelijktijdige Data-ophaling

Een andere eenvoudige en effectieve aanpak is om Promise.all te gebruiken om alle data-ophalingen gelijktijdig binnen één Suspense boundary te initiëren. Dit werkt goed wanneer de data-afhankelijkheden van tevoren bekend zijn.

Laten we teruggaan naar het gebruikersprofielvoorbeeld. In plaats van gegevens sequentieel op te halen, kunnen we de naam, avatar en activiteitfeed gelijktijdig ophalen:

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

async function fetchName() {
  // Simuleer API-aanroep
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

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

async function fetchActivity(name) {
  // Simuleer API-aanroep
  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;

Als Avatar en Activity echter ook afhankelijk zijn van fetchName, maar worden weergegeven binnen afzonderlijke suspense boundaries, kun je de fetchName promise naar de parent verplaatsen en deze via React Context aanbieden.

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

async function fetchName() {
  // Simuleer API-aanroep
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

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

async function fetchActivity(name) {
  // Simuleer API-aanroep
  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. Een Aangepaste Hook Gebruiken om Parallelle Ophalen te Beheren

Voor complexere scenario's met mogelijk voorwaardelijke data-afhankelijkheden, kun je een aangepaste hook maken om het parallelle data-ophalen te beheren en een resource terug te geven die Suspense kan gebruiken.

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 };
}

// Voorbeeldgebruik:
async function fetchUserData(userId) {
  // Simuleer API-aanroep
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Simuleer API-aanroep
  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;

Deze aanpak omvat de complexiteit van het beheren van de promises en laadtoestanden binnen de hook, waardoor de code van de component schoner wordt en meer gericht is op het weergeven van de gegevens.

4. Selectieve Hydratatie met Streaming Server Rendering

Voor server-gerenderde applicaties introduceert React 18 selectieve hydratatie met streaming server rendering. Hiermee kun je HTML in stukken naar de client sturen zodra deze beschikbaar komt op de server. Je kunt componenten die langzaam laden inpakken met <Suspense> boundaries, waardoor de rest van de pagina interactief kan worden terwijl de trage componenten nog steeds op de server worden geladen. Dit verbetert de waargenomen prestaties aanzienlijk, vooral voor gebruikers met trage netwerkverbindingen of apparaten.

Overweeg een scenario waarin een nieuwswebsite artikelen uit verschillende regio's van de wereld (bijvoorbeeld Azië, Europa, Amerika) moet weergeven. Sommige gegevensbronnen kunnen trager zijn dan andere. Selectieve hydratatie maakt het mogelijk om eerst artikelen uit snellere regio's weer te geven, terwijl die uit langzamere regio's nog worden geladen, waardoor wordt voorkomen dat de hele pagina wordt geblokkeerd.

Omgaan met Fouten en Laadtoestanden

Hoewel Suspense het beheer van de laadtoestand vereenvoudigt, blijft foutafhandeling cruciaal. Foutgrenzen (met behulp van de componentDidCatch levenscyclusmethode of de useErrorBoundary hook van bibliotheken zoals `react-error-boundary`) stellen je in staat om fouten die zich voordoen tijdens het ophalen of renderen van gegevens op een elegante manier af te handelen. Deze foutgrenzen moeten strategisch worden geplaatst om fouten binnen specifieke Suspense boundaries op te vangen, waardoor wordt voorkomen dat de hele applicatie crasht.

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

function MyComponent() {
  // ... haalt data op die fout kan veroorzaken
}

function App() {
  return (
    <ErrorBoundary fallback={<div>Er is iets misgegaan!</div>}>
      <Suspense fallback={<div>Laden...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Vergeet niet om informatieve en gebruiksvriendelijke fallback UI te bieden voor zowel laad- als fouttoestanden. Dit is vooral belangrijk voor internationale gebruikers die mogelijk te maken hebben met langzamere netwerksnelheden of regionale service-uitval.

Beste Praktijken voor het Optimaliseren van Data-ophaling met Suspense

• Identificeer en Prioriteer Kritieke Gegevens: Bepaal welke gegevens essentieel zijn voor de initiële weergave van uw applicatie en geef prioriteit aan het eerst ophalen van die gegevens.
• Laad Gegevens Vooraf Wanneer Mogelijk: Gebruik `React.preload` en resources om gegevens vooraf te laden voordat componenten ze nodig hebben, waardoor laadtoestanden worden geminimaliseerd.
• Haal Gegevens Gelijktijdig Op: Gebruik `Promise.all` of aangepaste hooks om meerdere data-ophalingen parallel te initiëren.
• Optimaliseer API-eindpunten: Zorg ervoor dat uw API-eindpunten zijn geoptimaliseerd voor prestaties, waardoor latentie en payloadgrootte worden geminimaliseerd. Overweeg technieken zoals GraphQL om alleen de gegevens op te halen die u nodig hebt.
• Implementeer Caching: Cache vaak geraadpleegde gegevens om het aantal API-verzoeken te verminderen. Overweeg het gebruik van bibliotheken zoals `swr` of `react-query` voor robuuste cachingmogelijkheden.
• Gebruik Code Splitting: Splits uw applicatie in kleinere stukken om de initiële laadtijd te verminderen. Combineer code splitting met Suspense om verschillende delen van uw applicatie progressief te laden en weer te geven.
• Monitor Prestaties: Monitor regelmatig de prestaties van uw applicatie met behulp van tools zoals Lighthouse of WebPageTest om knelpunten in de prestaties te identificeren en aan te pakken.
• Ga Elegant Om met Fouten: Implementeer foutgrenzen om fouten op te vangen tijdens het ophalen en renderen van gegevens, en geef informatieve foutmeldingen aan gebruikers.
• Overweeg Server-Side Rendering (SSR): Overweeg om SEO en prestatieredenen SSR met streaming en selectieve hydratatie te gebruiken om een snellere initiële ervaring te leveren.

Conclusie

React Suspense biedt in combinatie met strategieën voor parallelle data-ophaling een krachtige toolkit voor het bouwen van responsieve en performante webapplicaties. Door het watervalprobleem te begrijpen en technieken te implementeren zoals vooraf laden, gelijktijdig ophalen met Promise.all en aangepaste hooks, kun je de gebruikerservaring aanzienlijk verbeteren. Denk eraan om fouten elegant af te handelen en de prestaties te monitoren om ervoor te zorgen dat uw applicatie geoptimaliseerd blijft voor gebruikers wereldwijd. Naarmate React zich blijft ontwikkelen, zal het verkennen van nieuwe functies zoals selectieve hydratatie met streaming server rendering uw vermogen verder verbeteren om uitzonderlijke gebruikerservaringen te leveren, ongeacht de locatie of netwerkomstandigheden. Door deze technieken te omarmen, kunt u applicaties creëren die niet alleen functioneel zijn, maar ook een genot zijn om te gebruiken voor uw wereldwijde publiek.

Deze blogpost is bedoeld om een uitgebreid overzicht te geven van parallelle data-ophalingsstrategieën met React Suspense. We hopen dat je het informatief en nuttig vond. We moedigen je aan om te experimenteren met deze technieken in je eigen projecten en je bevindingen met de community te delen.