M

MLOG

Polski

Odkryj React Suspense do pobierania danych poza code splittingiem. Poznaj Fetch-As-You-Render, obsługę błędów i przyszłościowe wzorce dla globalnych aplikacji.

React Suspense i ładowanie zasobów: Opanowanie nowoczesnych wzorców pobierania danych

W dynamicznym świecie tworzenia stron internetowych, doświadczenie użytkownika (UX) jest najważniejsze. Oczekuje się, że aplikacje będą szybkie, responsywne i przyjemne w obsłudze, niezależnie od warunków sieciowych czy możliwości urządzenia. Dla programistów React często przekłada się to na zawiłe zarządzanie stanem, skomplikowane wskaźniki ładowania i ciągłą walkę z wodospadami pobierania danych. Wchodzi React Suspense, potężna, choć często źle rozumiana funkcja, zaprojektowana, by fundamentalnie zmienić sposób, w jaki obsługujemy operacje asynchroniczne, zwłaszcza pobieranie danych.

Początkowo wprowadzony do dzielenia kodu (code splitting) za pomocą React.lazy(), prawdziwy potencjał Suspense leży w jego zdolności do orkiestracji ładowania *dowolnego* asynchronicznego zasobu, w tym danych z API. Ten kompleksowy przewodnik zagłębi się w React Suspense pod kątem ładowania zasobów, badając jego podstawowe koncepcje, fundamentalne wzorce pobierania danych i praktyczne aspekty budowania wydajnych i odpornych na błędy globalnych aplikacji.

Ewolucja pobierania danych w React: Od imperatywnego do deklaratywnego

Przez wiele lat pobieranie danych w komponentach React opierało się głównie na popularnym wzorcu: użyciu hooka useEffect do inicjowania wywołania API, zarządzaniu stanami ładowania i błędów za pomocą useState oraz warunkowym renderowaniu na podstawie tych stanów. Chociaż funkcjonalne, podejście to często prowadziło do kilku wyzwań:

Rozważmy typowy scenariusz pobierania danych bez Suspense:

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };
    fetchUser();
  }, [userId]);

  if (isLoading) {
    return <p>Loading user profile...</p>;
  }

  if (error) {
    return <p style={"color: red;"}>Error: {error.message}</p>;
  }

  if (!user) {
    return <p>No user data available.</p>;
  }

  return (
    <div>
      <h2>User: {user.name}</h2>
      <p>Email: {user.email}</p>
      <!-- Więcej szczegółów użytkownika -->
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Welcome to the Application</h1>
      <UserProfile userId={"123"} />
    </div>
  );
}

Ten wzorzec jest wszechobecny, ale zmusza komponent do zarządzania własnym stanem asynchronicznym, co często prowadzi do ścisłego powiązania interfejsu użytkownika z logiką pobierania danych. Suspense oferuje bardziej deklaratywną i usprawnioną alternatywę.

Zrozumienie React Suspense poza code splittingiem

Większość programistów po raz pierwszy spotyka się z Suspense poprzez React.lazy() do dzielenia kodu, gdzie pozwala on na odroczenie ładowania kodu komponentu, dopóki nie będzie on potrzebny. Na przykład:

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./MyHeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading component...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

W tym scenariuszu, jeśli MyHeavyComponent nie został jeszcze załadowany, granica <Suspense> przechwyci obietnicę (promise) rzuconą przez lazy() i wyświetli fallback, dopóki kod komponentu nie będzie gotowy. Kluczowym spostrzeżeniem jest to, że Suspense działa poprzez przechwytywanie obietnic rzucanych podczas renderowania.

Ten mechanizm nie jest zarezerwowany wyłącznie dla ładowania kodu. Każda funkcja wywołana podczas renderowania, która rzuca obietnicę (np. ponieważ zasób nie jest jeszcze dostępny), może zostać przechwycona przez granicę Suspense wyżej w drzewie komponentów. Gdy obietnica zostanie rozwiązana, React próbuje ponownie wyrenderować komponent, a jeśli zasób jest już dostępny, fallback jest ukrywany, a rzeczywista treść jest wyświetlana.

Podstawowe koncepcje Suspense do pobierania danych

Aby wykorzystać Suspense do pobierania danych, musimy zrozumieć kilka podstawowych zasad:

1. Rzucanie obietnicy (Promise)

W przeciwieństwie do tradycyjnego kodu asynchronicznego, który używa async/await do rozwiązywania obietnic, Suspense opiera się na funkcji, która *rzuca* obietnicę, jeśli dane nie są gotowe. Kiedy React próbuje wyrenderować komponent, który wywołuje taką funkcję, a dane są wciąż oczekujące, obietnica jest rzucana. React następnie „wstrzymuje” renderowanie tego komponentu i jego dzieci, szukając najbliższej granicy <Suspense>.

2. Granica Suspense

Komponent <Suspense> działa jak granica błędu (error boundary) dla obietnic. Przyjmuje on właściwość fallback, która jest interfejsem użytkownika do renderowania, podczas gdy którykolwiek z jego potomków (lub ich potomków) jest w stanie zawieszenia (tzn. rzuca obietnicę). Gdy wszystkie obietnice rzucone w jego poddrzewie zostaną rozwiązane, fallback jest zastępowany przez rzeczywistą treść.

Pojedyncza granica Suspense może zarządzać wieloma operacjami asynchronicznymi. Na przykład, jeśli masz dwa komponenty w tej samej granicy <Suspense> i każdy z nich musi pobrać dane, fallback będzie wyświetlany, dopóki *oba* pobrania danych nie zostaną zakończone. Unika to pokazywania częściowego interfejsu użytkownika i zapewnia bardziej skoordynowane doświadczenie ładowania.

3. Menedżer cache/zasobów (odpowiedzialność po stronie programisty)

Co kluczowe, sam Suspense nie obsługuje pobierania danych ani buforowania. Jest to jedynie mechanizm koordynacji. Aby Suspense działał do pobierania danych, potrzebujesz warstwy, która:

Ten „menedżer zasobów” jest zazwyczaj implementowany przy użyciu prostego cache (np. Map lub obiektu) do przechowywania stanu każdego zasobu (oczekujący, rozwiązany lub błędny). Chociaż można to zbudować ręcznie w celach demonstracyjnych, w prawdziwej aplikacji użyłbyś solidnej biblioteki do pobierania danych, która integruje się z Suspense.

4. Concurrent Mode (Ulepszenia w React 18)

Chociaż Suspense może być używany w starszych wersjach React, jego pełna moc jest uwalniana w Concurrent React (domyślnie włączonym w React 18 za pomocą createRoot). Concurrent Mode pozwala Reactowi przerywać, wstrzymywać i wznawiać pracę nad renderowaniem. Oznacza to:

Wzorce pobierania danych z Suspense

Przyjrzyjmy się ewolucji wzorców pobierania danych wraz z pojawieniem się Suspense.

Wzorzec 1: Fetch-Then-Render (tradycyjny z opakowaniem Suspense)

To klasyczne podejście, w którym dane są pobierane, a dopiero potem komponent jest renderowany. Chociaż nie wykorzystuje bezpośrednio mechanizmu „rzucania obietnicy” dla danych, można opakować komponent, który *ostatecznie* renderuje dane w granicę Suspense, aby zapewnić fallback. Chodzi tu bardziej o użycie Suspense jako ogólnego orkiestratora interfejsu ładowania dla komponentów, które w końcu stają się gotowe, nawet jeśli ich wewnętrzne pobieranie danych jest nadal oparte na tradycyjnym useEffect.

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

function UserDetails({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      setIsLoading(true);
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      setUser(data);
      setIsLoading(false);
    };
    fetchUserData();
  }, [userId]);

  if (isLoading) {
    return <p>Loading user details...</p>;
  }

  return (
    <div>
      <h3>User: {user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Fetch-Then-Render Example</h1>
      <Suspense fallback={<div>Overall page loading...</div>}>
        <UserDetails userId={"1"} />
      </Suspense>
    </div>
  );
}

Zalety: Prosty do zrozumienia, kompatybilny wstecz. Może być użyty jako szybki sposób na dodanie globalnego stanu ładowania.

Wady: Nie eliminuje powtarzalnego kodu wewnątrz UserDetails. Nadal podatny na wodospady, jeśli komponenty pobierają dane sekwencyjnie. Nie wykorzystuje w pełni mechanizmu „rzucania i łapania” Suspense dla samych danych.

Wzorzec 2: Render-Then-Fetch (pobieranie wewnątrz renderowania, nie do użytku produkcyjnego)

Ten wzorzec służy głównie do zilustrowania, czego nie należy robić bezpośrednio z Suspense, ponieważ może to prowadzić do nieskończonych pętli lub problemów z wydajnością, jeśli nie jest obsługiwane skrupulatnie. Polega na próbie pobrania danych lub wywołania funkcji zawieszającej bezpośrednio w fazie renderowania komponentu, *bez* odpowiedniego mechanizmu buforowania.

// NIE UŻYWAJ TEGO W PRODUKCJI BEZ ODPOWIEDNIEJ WARSTWY CACHE
// To jest czysto ilustracyjne, aby pokazać koncepcyjnie, jak może działać bezpośrednie 'throw'.

let fetchedData = null;
let dataPromise = null;

function fetchDataSynchronously(url) {
  if (fetchedData) {
    return fetchedData;
  }

  if (!dataPromise) {
    dataPromise = fetch(url)
      .then(res => res.json())
      .then(data => { fetchedData = data; dataPromise = null; return data; })
      .catch(err => { dataPromise = null; throw err; });
  }
  throw dataPromise; // W tym miejscu do gry wchodzi Suspense
}

function UserDetailsBadExample({ userId }) {
  const user = fetchDataSynchronously(`/api/users/${userId}`);
  return (
    <div>
      <h3>User: {user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Render-Then-Fetch (Illustrative, NOT Recommended Directly)</h1>
      <Suspense fallback={<div>Loading user...</div>}>
        <UserDetailsBadExample userId={"2"} />
      </Suspense>
    </div>
  );
}

Zalety: Pokazuje, jak komponent może bezpośrednio „prosić” o dane i zawieszać się, jeśli nie są gotowe.

Wady: Wysoce problematyczne w produkcji. Ten ręczny, globalny system fetchedData i dataPromise jest uproszczony, nie radzi sobie z wieloma żądaniami, unieważnianiem danych ani stanami błędów w solidny sposób. Jest to prymitywna ilustracja koncepcji „rzucania obietnicy”, a nie wzorzec do przyjęcia.

Wzorzec 3: Fetch-As-You-Render (Idealny wzorzec Suspense)

To jest zmiana paradygmatu, którą Suspense naprawdę umożliwia w pobieraniu danych. Zamiast czekać, aż komponent się wyrenderuje, zanim pobierze swoje dane, lub pobierać wszystkie dane z góry, Fetch-As-You-Render oznacza, że zaczynasz pobierać dane *tak szybko, jak to możliwe*, często *przed* lub *równocześnie z* procesem renderowania. Komponenty następnie „odczytują” dane z cache, a jeśli dane nie są gotowe, zawieszają się. Główną ideą jest oddzielenie logiki pobierania danych od logiki renderowania komponentu.

Aby zaimplementować Fetch-As-You-Render, potrzebujesz mechanizmu do:

  1. Inicjowania pobierania danych poza funkcją renderowania komponentu (np. przy wejściu na trasę lub kliknięciu przycisku).
  2. Przechowywania obietnicy lub rozwiązanych danych w cache.
  3. Zapewnienia komponentom sposobu na „odczyt” z tego cache. Jeśli dane nie są jeszcze dostępne, funkcja odczytu rzuca oczekującą obietnicę.

Ten wzorzec rozwiązuje problem wodospadu. Jeśli dwa różne komponenty potrzebują danych, ich żądania mogą być inicjowane równolegle, a interfejs użytkownika pojawi się dopiero, gdy *oba* będą gotowe, co jest orkiestrowane przez pojedynczą granicę Suspense.

Implementacja ręczna (dla zrozumienia)

Aby zrozumieć podstawowe mechanizmy, stwórzmy uproszczony, ręczny menedżer zasobów. W prawdziwej aplikacji użyłbyś dedykowanej biblioteki.

import React, { Suspense } from 'react';

// --- Prosty menedżer cache/zasobów --- //
const cache = new Map();

function createResource(promise) {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
}

function fetchData(key, fetcher) {
  if (!cache.has(key)) {
    cache.set(key, createResource(fetcher()));
  }
  return cache.get(key);
}

// --- Funkcje pobierania danych --- //
const fetchUserById = (id) => {
  console.log(`Fetching user ${id}...`);
  return new Promise(resolve => setTimeout(() => {
    const users = {
      '1': { id: '1', name: 'Alice Smith', email: 'alice@example.com' },
      '2': { id: '2', name: 'Bob Johnson', email: 'bob@example.com' },
      '3': { id: '3', name: 'Charlie Brown', email: 'charlie@example.com' }
    };
    resolve(users[id]);
  }, 1500));
};

const fetchPostsByUserId = (userId) => {
  console.log(`Fetching posts for user ${userId}...`);
  return new Promise(resolve => setTimeout(() => {
    const posts = {
      '1': [{ id: 'p1', title: 'My First Post' }, { id: 'p2', title: 'Travel Adventures' }],
      '2': [{ id: 'p3', title: 'Coding Insights' }],
      '3': [{ id: 'p4', title: 'Global Trends' }, { id: 'p5', title: 'Local Cuisine' }]
    };
    resolve(posts[userId] || []);
  }, 2000));
};

// --- Komponenty --- //
function UserProfile({ userId }) {
  const userResource = fetchData(`user-${userId}`, () => fetchUserById(userId));
  const user = userResource.read(); // To spowoduje zawieszenie, jeśli dane użytkownika nie są gotowe

  return (
    <div>
      <h3>User: {user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

function UserPosts({ userId }) {
  const postsResource = fetchData(`posts-${userId}`, () => fetchPostsByUserId(userId));
  const posts = postsResource.read(); // To spowoduje zawieszenie, jeśli dane postów nie są gotowe

  return (
    <div>
      <h4>Posts by {userId}:</h4>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
        {posts.length === 0 && <li>No posts found.</li>}
      </ul>
    </div>
  );
}

// --- Aplikacja --- //
let initialUserResource = null;
let initialPostsResource = null;

function prefetchDataForUser(userId) {
  initialUserResource = fetchData(`user-${userId}`, () => fetchUserById(userId));
  initialPostsResource = fetchData(`posts-${userId}`, () => fetchPostsByUserId(userId));
}

// Wstępnie pobierz niektóre dane, zanim komponent App zostanie wyrenderowany
prefetchDataForUser('1');

function App() {
  return (
    <div>
      <h1>Fetch-As-You-Render with Suspense</h1>
      <p>This demonstrates how data fetching can happen in parallel, coordinated by Suspense.</p>

      <Suspense fallback={<div>Loading user profile and posts...</div>}>
        <UserProfile userId={"1"} />
        <UserPosts userId={"1"} />
      </Suspense>

      <h2>Another Section</h2>
      <Suspense fallback={<div>Loading different user...</div>}>
        <UserProfile userId={"2"} />
      </Suspense>
    </div>
  );
}

W tym przykładzie:

Biblioteki dla Fetch-As-You-Render

Ręczne budowanie i utrzymywanie solidnego menedżera zasobów jest skomplikowane. Na szczęście, kilka dojrzałych bibliotek do pobierania danych przyjęło lub przyjmuje Suspense, dostarczając przetestowane w boju rozwiązania:

Te biblioteki abstrahują złożoność tworzenia i zarządzania zasobami, obsługując buforowanie, ponowną walidację, optymistyczne aktualizacje i obsługę błędów, co znacznie ułatwia implementację Fetch-As-You-Render.

Wzorzec 4: Wstępne pobieranie (Prefetching) z bibliotekami świadomymi Suspense

Prefetching to potężna optymalizacja, w której proaktywnie pobierasz dane, których użytkownik prawdopodobnie będzie potrzebował w najbliższej przyszłości, zanim jeszcze jawnie o nie poprosi. Może to drastycznie poprawić postrzeganą wydajność.

Dzięki bibliotekom świadomym Suspense, prefetching staje się bezproblemowy. Możesz wyzwalać pobieranie danych w odpowiedzi na interakcje użytkownika, które nie zmieniają natychmiast interfejsu, takie jak najechanie kursorem na link lub przycisk.

import React, { Suspense } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// Załóżmy, że to są Twoje wywołania API
const fetchProductById = async (id) => {
  console.log(`Fetching product ${id}...`);
  return new Promise(resolve => setTimeout(() => {
    const products = {
      'A001': { id: 'A001', name: 'Global Widget X', price: 29.99, description: 'A versatile widget for international use.' },
      'B002': { id: 'B002', name: 'Universal Gadget Y', price: 149.99, description: 'Cutting-edge gadget, loved worldwide.' },
    };
    resolve(products[id]);
  }, 1000));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true, // Domyślnie włącz Suspense dla wszystkich zapytań
    },
  },
});

function ProductDetails({ productId }) {
  const { data: product } = useQuery({
    queryKey: ['product', productId],
    queryFn: () => fetchProductById(productId),
  });

  return (
    <div style={{\"border\": \"1px solid #ccc\", \"padding\": \"15px\", \"margin\": \"10px 0\"}}>
      <h3>{product.name}</h3>
      <p>Price: ${product.price.toFixed(2)}</p>
      <p>{product.description}</p>
    </div>
  );
}

function ProductList() {
  const handleProductHover = (productId) => {
    // Wstępnie pobierz dane, gdy użytkownik najedzie na link produktu
    queryClient.prefetchQuery({
      queryKey: ['product', productId],
      queryFn: () => fetchProductById(productId),
    });
    console.log(`Prefetching product ${productId}`);
  };

  return (
    <div>
      <h2>Available Products:</h2>
      <ul>
        <li>
          <a href=\"#\" onMouseEnter={() => handleProductHover('A001')}
             onClick={(e) => { e.preventDefault(); /* Nawiguj lub pokaż szczegóły */ }}
          >Global Widget X (A001)</a>
        </li>
        <li>
          <a href=\"#\" onMouseEnter={() => handleProductHover('B002')}
             onClick={(e) => { e.preventDefault(); /* Nawiguj lub pokaż szczegóły */ }}
          >Universal Gadget Y (B002)</a>
        </li>
      </ul>
      <p>Hover over a product link to see prefetching in action. Open network tab to observe.</p>
    </div>
  );
}

function App() {
  const [showProductA, setShowProductA] = React.useState(false);
  const [showProductB, setShowProductB] = React.useState(false);

  return (
    <QueryClientProvider client={queryClient}>
      <h1>Prefetching with React Suspense (React Query)</h1>
      <ProductList />

      <button onClick={() => setShowProductA(true)}>Show Global Widget X</button>
      <button onClick={() => setShowProductB(true)}>Show Universal Gadget Y</button>

      {showProductA && (
        <Suspense fallback={<p>Loading Global Widget X...</p>}>
          <ProductDetails productId=\"A001\" />
        </Suspense>
      )}
      {showProductB && (
        <Suspense fallback={<p>Loading Universal Gadget Y...</p>}>
          <ProductDetails productId=\"B002\" />
        </Suspense>
      )}
    </QueryClientProvider>
  );
}

W tym przykładzie najechanie kursorem na link produktu wyzwala `queryClient.prefetchQuery`, co inicjuje pobieranie danych w tle. Jeśli użytkownik następnie kliknie przycisk, aby pokazać szczegóły produktu, a dane są już w cache z prefetchingu, komponent wyrenderuje się natychmiast, bez zawieszania. Jeśli prefetching jest wciąż w toku lub nie został zainicjowany, Suspense wyświetli fallback, dopóki dane nie będą gotowe.

Obsługa błędów z Suspense i Error Boundaries

Podczas gdy Suspense obsługuje stan „ładowania” poprzez wyświetlanie fallbacka, nie obsługuje bezpośrednio stanów „błędu”. Jeśli obietnica rzucona przez zawieszający się komponent zostanie odrzucona (tzn. pobieranie danych nie powiedzie się), błąd ten będzie propagowany w górę drzewa komponentów. Aby elegancko obsłużyć te błędy i wyświetlić odpowiedni interfejs użytkownika, należy użyć Error Boundaries (granic błędów).

Error Boundary to komponent React, który implementuje jedną z metod cyklu życia: componentDidCatch lub static getDerivedStateFromError. Przechwytuje on błędy JavaScript w dowolnym miejscu w swoim drzewie komponentów podrzędnych, włączając w to błędy rzucone przez obietnice, które Suspense normalnie by przechwycił, gdyby były w stanie oczekiwania.

import React, { Suspense, useState } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// --- Komponent granicy błędu (Error Boundary) --- //
class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    // Zaktualizuj stan, aby następne renderowanie pokazało interfejs zapasowy.
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Możesz również zapisać błąd w usłudze raportowania błędów
    console.error(\"Caught an error:\", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Możesz wyrenderować dowolny niestandardowy interfejs zapasowy
      return (
        <div style={{\"border\": \"2px solid red\", \"padding\": \"20px\", \"margin\": \"20px 0\", \"background\": \"#ffe0e0\"}}>
          <h2>Something went wrong!</h2>
          <p>{this.state.error && this.state.error.message}</p>
          <p>Please try refreshing the page or contact support.</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>Try Again</button>
        </div>
      );
    }
    return this.props.children;
  }
}

// --- Pobieranie danych (z potencjalnym błędem) --- //
const fetchItemById = async (id) => {
  console.log(`Attempting to fetch item ${id}...`);
  return new Promise((resolve, reject) => setTimeout(() => {
    if (id === 'error-item') {
      reject(new Error('Failed to load item: Network unreachable or item not found.'));
    } else if (id === 'slow-item') {
      resolve({ id: 'slow-item', name: 'Delivered Slowly', data: 'This item took a while but arrived!', status: 'success' });
    } else {
      resolve({ id, name: `Item ${id}`, data: `Data for item ${id}` });
    }
  }, id === 'slow-item' ? 3000 : 800));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
      retry: false, // Dla demonstracji wyłącz ponawianie, aby błąd był natychmiastowy
    },
  },
});

function DisplayItem({ itemId }) {
  const { data: item } = useQuery({
    queryKey: ['item', itemId],
    queryFn: () => fetchItemById(itemId),
  });

  return (
    <div>
      <h3>Item Details:</h3>
      <p>ID: {item.id}</p>
      <p>Name: {item.name}</p>
      <p>Data: {item.data}</p>
    </div>
  );
}

function App() {
  const [fetchType, setFetchType] = useState('normal-item');

  return (
    <QueryClientProvider client={queryClient}>
      <h1>Suspense and Error Boundaries</h1>

      <div>
        <button onClick={() => setFetchType('normal-item')}>Fetch Normal Item</button>
        <button onClick={() => setFetchType('slow-item')}>Fetch Slow Item</button>
        <button onClick={() => setFetchType('error-item')}>Fetch Error Item</button>
      </div>

      <MyErrorBoundary>
        <Suspense fallback={<p>Loading item via Suspense...</p>}>
          <DisplayItem itemId={fetchType} />
        </Suspense>
      </MyErrorBoundary>
    </QueryClientProvider>
  );
}

Opakowując granicę Suspense (lub komponenty, które mogą się zawiesić) w Error Boundary, zapewniasz, że awarie sieciowe lub błędy serwera podczas pobierania danych są przechwytywane i obsługiwane w elegancki sposób, zapobiegając awarii całej aplikacji. Zapewnia to solidne i przyjazne dla użytkownika doświadczenie, pozwalając użytkownikom zrozumieć problem i potencjalnie ponowić próbę.

Zarządzanie stanem i unieważnianie danych z Suspense

Ważne jest, aby wyjaśnić, że React Suspense głównie zajmuje się początkowym stanem ładowania zasobów asynchronicznych. Nie zarządza on z natury cache po stronie klienta, nie obsługuje unieważniania danych ani nie orkiestruje mutacji (operacji tworzenia, aktualizacji, usuwania) i ich późniejszych aktualizacji interfejsu użytkownika.

W tym miejscu biblioteki do pobierania danych świadome Suspense (React Query, SWR, Apollo Client, Relay) stają się niezbędne. Uzupełniają one Suspense, zapewniając:

Bez solidnej biblioteki do pobierania danych, implementacja tych funkcji na bazie ręcznego menedżera zasobów Suspense byłaby znaczącym przedsięwzięciem, w zasadzie wymagającym zbudowania własnego frameworka do pobierania danych.

Praktyczne aspekty i najlepsze praktyki

Przyjęcie Suspense do pobierania danych to znacząca decyzja architektoniczna. Oto kilka praktycznych uwag dotyczących globalnej aplikacji:

1. Nie wszystkie dane potrzebują Suspense

Suspense jest idealny dla krytycznych danych, które bezpośrednio wpływają na początkowe renderowanie komponentu. Dla danych niekrytycznych, pobierania w tle lub danych, które można ładować leniwie bez silnego wpływu wizualnego, tradycyjny useEffect lub pre-rendering mogą być nadal odpowiednie. Nadużywanie Suspense może prowadzić do mniej szczegółowego doświadczenia ładowania, ponieważ pojedyncza granica Suspense czeka na rozwiązanie *wszystkich* swoich potomków.

2. Ziarnistość granic Suspense

Rozważnie umieszczaj swoje granice <Suspense>. Pojedyncza, duża granica na szczycie aplikacji może ukryć całą stronę za wskaźnikiem ładowania, co może być frustrujące. Mniejsze, bardziej szczegółowe granice pozwalają różnym częściom strony ładować się niezależnie, zapewniając bardziej progresywne i responsywne doświadczenie. Na przykład, granica wokół komponentu profilu użytkownika i kolejna wokół listy polecanych produktów.

<div>
  <h1>Product Page</h1>
  <Suspense fallback={<p>Loading main product details...</p>}>
    <ProductDetails id=\"prod123\" />
  </Suspense>

  <hr />

  <h2>Related Products</h2>
  <Suspense fallback={<p>Loading related products...</p>}>
    <RelatedProducts category=\"electronics\" />
  </Suspense>
</div>

To podejście oznacza, że użytkownicy mogą zobaczyć główne szczegóły produktu, nawet jeśli powiązane produkty wciąż się ładują.

3. Renderowanie po stronie serwera (SSR) i strumieniowanie HTML

Nowe API strumieniowego SSR w React 18 (renderToPipeableStream) w pełni integrują się z Suspense. Pozwala to serwerowi wysyłać HTML, gdy tylko jest gotowy, nawet jeśli części strony (takie jak komponenty zależne od danych) wciąż się ładują. Serwer może strumieniować placeholder (z fallbacka Suspense), a następnie strumieniować rzeczywistą treść, gdy dane zostaną rozwiązane, bez konieczności pełnego ponownego renderowania po stronie klienta. To znacznie poprawia postrzeganą wydajność ładowania dla globalnych użytkowników w różnych warunkach sieciowych.

4. Stopniowe wdrażanie

Nie musisz przepisywać całej aplikacji, aby używać Suspense. Możesz wprowadzać go stopniowo, zaczynając od nowych funkcji lub komponentów, które najbardziej skorzystają z jego deklaratywnych wzorców ładowania.

5. Narzędzia i debugowanie

Chociaż Suspense upraszcza logikę komponentów, debugowanie może być inne. React DevTools zapewniają wgląd w granice Suspense i ich stany. Zapoznaj się z tym, jak wybrana biblioteka do pobierania danych udostępnia swój wewnętrzny stan (np. React Query Devtools).

6. Limity czasowe dla fallbacków Suspense

Dla bardzo długich czasów ładowania możesz chcieć wprowadzić limit czasowy dla fallbacka Suspense lub przełączyć się na bardziej szczegółowy wskaźnik ładowania po pewnym opóźnieniu. Hooki useDeferredValue i useTransition w React 18 mogą pomóc w zarządzaniu tymi bardziej zniuansowanymi stanami ładowania, pozwalając na pokazanie „starej” wersji interfejsu, podczas gdy nowe dane są pobierane, lub odroczenie mniej pilnych aktualizacji.

Przyszłość pobierania danych w React: React Server Components i dalej

Podróż pobierania danych w React nie kończy się na Suspense po stronie klienta. React Server Components (RSC) stanowią znaczącą ewolucję, obiecując zatarcie granic między klientem a serwerem i dalszą optymalizację pobierania danych.

W miarę jak React dojrzewa, Suspense będzie coraz bardziej centralnym elementem układanki do budowania wysoce wydajnych, przyjaznych dla użytkownika i łatwych w utrzymaniu aplikacji. Skłania programistów do bardziej deklaratywnego i odpornego na błędy sposobu obsługi operacji asynchronicznych, przenosząc złożoność z poszczególnych komponentów do dobrze zarządzanej warstwy danych.

Podsumowanie

React Suspense, początkowo funkcja do dzielenia kodu, rozwinął się w transformacyjne narzędzie do pobierania danych. Przyjmując wzorzec Fetch-As-You-Render i wykorzystując biblioteki świadome Suspense, programiści mogą znacznie poprawić doświadczenie użytkownika swoich aplikacji, eliminując wodospady ładowania, upraszczając logikę komponentów i zapewniając płynne, skoordynowane stany ładowania. W połączeniu z Error Boundaries dla solidnej obsługi błędów i przyszłą obietnicą React Server Components, Suspense daje nam moc do budowania aplikacji, które są nie tylko wydajne i odporne na błędy, ale także z natury bardziej przyjemne dla użytkowników na całym świecie. Przejście na paradygmat pobierania danych oparty na Suspense wymaga dostosowania koncepcyjnego, ale korzyści w postaci przejrzystości kodu, wydajności i satysfakcji użytkownika są znaczne i warte inwestycji.