Koordynacja React Suspense: Opanowanie równoległego pobierania danych

React Suspense zrewolucjonizował sposób obsługi operacji asynchronicznych, zwłaszcza pobierania danych. Umożliwia komponentom "zawieszenie" renderowania w oczekiwaniu na załadowanie danych, oferując deklaratywny sposób zarządzania stanami ładowania. Jednak proste otoczenie pojedynczych operacji pobierania danych za pomocą Suspense może prowadzić do efektu wodospadu, gdzie jedna operacja kończy się, zanim rozpocznie się następna, negatywnie wpływając na wydajność. Ten post na blogu zagłębia się w zaawansowane strategie koordynowania wielu operacji pobierania danych równolegle przy użyciu Suspense, optymalizując responsywność aplikacji i poprawiając doświadczenia użytkownika dla globalnej publiczności.

Zrozumienie problemu wodospadu w pobieraniu danych

Wyobraź sobie scenariusz, w którym musisz wyświetlić profil użytkownika z jego imieniem, awatarem i ostatnią aktywnością. Jeśli pobierasz każdą część danych sekwencyjnie, użytkownik widzi wskaźnik ładowania dla imienia, następnie kolejny dla awatara, a na końcu jeden dla kanału aktywności. Ten sekwencyjny wzorzec ładowania tworzy efekt wodospadu, opóźniając renderowanie kompletnego profilu i frustrując użytkowników. Dla użytkowników międzynarodowych o różnej prędkości sieci to opóźnienie może być jeszcze bardziej wyraźne.

Rozważ ten uproszczony fragment kodu:

function UserProfile() {
  const name = useName(); // Fetches user name
  const avatar = useAvatar(name); // Fetches avatar based on name
  const activity = useActivity(name); // Fetches activity based on name

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

W tym przykładzie useAvatar i useActivity są zależne od wyniku useName. Tworzy to wyraźny wodospad – useAvatar i useActivity nie mogą rozpocząć pobierania danych, dopóki useName się nie zakończy. Jest to nieefektywne i często stanowi wąskie gardło wydajności.

Strategie równoległego pobierania danych z Suspense

Kluczem do optymalizacji pobierania danych za pomocą Suspense jest jednoczesne inicjowanie wszystkich żądań danych. Oto kilka strategii, które możesz zastosować:

1. Wstępne ładowanie danych za pomocą React.preload i zasobów

Jedną z najpotężniejszych technik jest wstępne ładowanie danych, zanim komponent w ogóle się wyrenderuje. Polega to na utworzeniu "zasobu" (obiektu, który hermetyzuje obietnicę pobierania danych) i wstępnym pobraniu danych. `React.preload` w tym pomaga. Zanim komponent będzie potrzebował danych, są one już dostępne, eliminując stan ładowania niemal całkowicie.

Rozważ zasób do pobierania produktu:

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

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

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

Teraz możesz wstępnie załadować ten zasób, zanim komponent ProductDetails zostanie wyrenderowany. Na przykład podczas przejść między trasami lub po najechaniu myszą.

React.preload(productResource);

Zapewnia to, że dane są prawdopodobnie dostępne w momencie, gdy komponent ProductDetails ich potrzebuje, minimalizując lub eliminując stan ładowania.

2. Użycie Promise.all do równoczesnego pobierania danych

Innym prostym i skutecznym podejściem jest użycie Promise.all do jednoczesnego inicjowania wszystkich operacji pobierania danych w ramach pojedynczej granicy Suspense. Działa to dobrze, gdy zależności danych są znane z góry.

Wróćmy do przykładu profilu użytkownika. Zamiast pobierać dane sekwencyjnie, możemy pobrać imię, awatar i kanał aktywności równolegle:

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

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

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

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

Jeśli jednak każdy z komponentów Avatar i Activity również opiera się na fetchName, ale są renderowane w oddzielnych granicach Suspense, możesz przenieść obietnicę fetchName do komponentu nadrzędnego i udostępnić ją za pośrednictwem React Context.

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

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

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

async function fetchActivity(name) {
  // Simulate API call
  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. Użycie niestandardowego hooka do zarządzania równoległymi operacjami pobierania

W bardziej złożonych scenariuszach z potencjalnie warunkowymi zależnościami danych, możesz utworzyć niestandardowy hook do zarządzania równoległym pobieraniem danych i zwracania zasobu, który Suspense może wykorzystać.

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

// Example usage:
async function fetchUserData(userId) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

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

To podejście hermetyzuje złożoność zarządzania obietnicami i stanami ładowania wewnątrz hooka, co sprawia, że kod komponentu jest czystszy i bardziej skoncentrowany na renderowaniu danych.

4. Selektywna hydratacja ze strumieniowym renderowaniem po stronie serwera

Dla aplikacji renderowanych po stronie serwera, React 18 wprowadza selektywną hydratację ze strumieniowym renderowaniem po stronie serwera. Pozwala to na wysyłanie HTML-a do klienta w kawałkach, gdy tylko stanie się dostępny na serwerze. Wolno ładujące się komponenty można otoczyć granicami <Suspense>, co pozwala reszcie strony stać się interaktywną, podczas gdy wolne komponenty nadal ładują się na serwerze. To drastycznie poprawia postrzeganą wydajność, zwłaszcza dla użytkowników z wolnymi połączeniami sieciowymi lub urządzeniami.

Rozważ scenariusz, w którym witryna z wiadomościami musi wyświetlać artykuły z różnych regionów świata (np. Azja, Europa, Ameryka). Niektóre źródła danych mogą być wolniejsze niż inne. Selektywna hydratacja pozwala najpierw wyświetlić artykuły z szybszych regionów, podczas gdy te z wolniejszych regionów nadal się ładują, zapobiegając blokowaniu całej strony.

Obsługa błędów i stanów ładowania

Chociaż Suspense upraszcza zarządzanie stanami ładowania, obsługa błędów pozostaje kluczowa. Granice błędów (wykorzystujące metodę cyklu życia componentDidCatch lub hook useErrorBoundary z bibliotek takich jak `react-error-boundary`) pozwalają na elegancką obsługę błędów, które występują podczas pobierania danych lub renderowania. Te granice błędów powinny być strategicznie rozmieszczone, aby wyłapywać błędy w ramach określonych granic Suspense, zapobiegając awariom całej aplikacji.

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

function MyComponent() {
  // ... fetches data that might error
}

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

Pamiętaj o zapewnieniu informacyjnego i przyjaznego dla użytkownika interfejsu zastępczego (fallback UI) dla stanów ładowania i błędów. Jest to szczególnie ważne dla użytkowników międzynarodowych, którzy mogą napotykać wolniejsze prędkości sieci lub regionalne awarie usług.

Najlepsze praktyki optymalizacji pobierania danych z Suspense

• Identyfikuj i priorytetyzuj krytyczne dane: Określ, które dane są niezbędne do początkowego renderowania aplikacji i priorytetyzuj ich pobieranie.
• Wstępnie ładuj dane, gdy to możliwe: Używaj `React.preload` i zasobów do wstępnego ładowania danych, zanim komponenty ich potrzebują, minimalizując stany ładowania.
• Pobieraj dane równolegle: Wykorzystaj `Promise.all` lub niestandardowe hooki do inicjowania wielu operacji pobierania danych równolegle.
• Optymalizuj punkty końcowe API: Upewnij się, że punkty końcowe API są zoptymalizowane pod kątem wydajności, minimalizując opóźnienia i rozmiar ładunku. Rozważ użycie technik takich jak GraphQL, aby pobierać tylko te dane, których potrzebujesz.
• Implementuj buforowanie: Buforuj często dostępne dane, aby zmniejszyć liczbę żądań API. Rozważ użycie bibliotek takich jak `swr` lub `react-query` dla solidnych możliwości buforowania.
• Użyj dzielenia kodu (Code Splitting): Podziel aplikację na mniejsze części, aby skrócić początkowy czas ładowania. Połącz dzielenie kodu z Suspense, aby progresywnie ładować i renderować różne części aplikacji.
• Monitoruj wydajność: Regularnie monitoruj wydajność aplikacji za pomocą narzędzi takich jak Lighthouse lub WebPageTest, aby identyfikować i eliminować wąskie gardła wydajności.
• Elegancko obsługuj błędy: Wdrażaj granice błędów, aby wyłapywać błędy podczas pobierania i renderowania danych, dostarczając użytkownikom informacyjnych komunikatów o błędach.
• Rozważ renderowanie po stronie serwera (SSR): Ze względów SEO i wydajności rozważ użycie SSR ze strumieniowaniem i selektywną hydratacją, aby zapewnić szybsze początkowe doświadczenie.

Podsumowanie

React Suspense, w połączeniu ze strategiami równoległego pobierania danych, stanowi potężny zestaw narzędzi do budowania responsywnych i wydajnych aplikacji internetowych. Rozumiejąc problem wodospadu i wdrażając techniki takie jak wstępne ładowanie, współbieżne pobieranie za pomocą Promise.all oraz niestandardowe hooki, możesz znacząco poprawić doświadczenie użytkownika. Pamiętaj, aby elegancko obsługiwać błędy i monitorować wydajność, aby zapewnić, że Twoja aplikacja pozostanie zoptymalizowana dla użytkowników na całym świecie. W miarę ewolucji Reacta, eksplorowanie nowych funkcji, takich jak selektywna hydratacja ze strumieniowym renderowaniem po stronie serwera, jeszcze bardziej zwiększy Twoją zdolność do dostarczania wyjątkowych doświadczeń użytkownika, niezależnie od lokalizacji czy warunków sieciowych. Przyjmując te techniki, możesz tworzyć aplikacje, które są nie tylko funkcjonalne, ale także przyjemne w użyciu dla globalnej publiczności.

Ten post na blogu miał na celu przedstawienie kompleksowego przeglądu strategii równoległego pobierania danych za pomocą React Suspense. Mamy nadzieję, że okazał się on pouczający i pomocny. Zachęcamy do eksperymentowania z tymi technikami we własnych projektach i dzielenia się swoimi odkryciami ze społecznością.