Koordinace React Suspense: Ovládnutí paralelního načítání dat

React Suspense způsobilo revoluci ve způsobu, jakým zpracováváme asynchronní operace, zejména načítání dat. Umožňuje komponentám "pozastavit" renderování během čekání na načtení dat, čímž poskytuje deklarativní způsob správy stavů načítání. Jednoduché zabalení jednotlivých načítání dat pomocí Suspense však může vést k efektu vodopádu, kdy jedno načtení dokončí dříve, než začne další, což negativně ovlivňuje výkon. Tento blogový příspěvek se zabývá pokročilými strategiemi pro koordinaci vícenásobného paralelního načítání dat pomocí Suspense, optimalizaci rychlosti reakce vaší aplikace a zlepšení uživatelského zážitku pro globální publikum.

Pochopení problému vodopádu při načítání dat

Představte si scénář, kde potřebujete zobrazit uživatelský profil s jeho jménem, avatarem a nedávnou aktivitou. Pokud načítáte každý kus dat postupně, uživatel uvidí načítací spinner pro jméno, poté další pro avatar a nakonec jeden pro kanál aktivity. Tento sekvenční vzor načítání vytváří efekt vodopádu, zpožďuje vykreslení kompletního profilu a frustruje uživatele. Pro mezinárodní uživatele s různými rychlostmi sítě může být toto zpoždění ještě výraznější.

Zvažte tento zjednodušený úryvek kódu:

function UserProfile() {
  const name = useName(); // Načítá jméno uživatele
  const avatar = useAvatar(name); // Načítá avatar na základě jména
  const activity = useActivity(name); // Načítá aktivitu na základě jména

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

V tomto příkladu jsou useAvatar a useActivity závislé na výsledku useName. To vytváří jasný vodopád – useAvatar a useActivity nemohou začít načítat data, dokud se useName nedokončí. To je neefektivní a běžné úzké místo výkonu.

Strategie pro paralelní načítání dat se Suspense

Klíčem k optimalizaci načítání dat se Suspense je iniciovat všechny požadavky na data souběžně. Zde je několik strategií, které můžete použít:

1. Přednačítání dat pomocí `React.preload` a Resources

Jednou z nejúčinnějších technik je přednačítání dat ještě před vykreslením komponenty. To zahrnuje vytvoření "zdroje" (objektu, který zapouzdřuje promise pro načítání dat) a předběžné načtení dat. `React.preload` s tímto pomáhá. V době, kdy komponenta data potřebuje, jsou již k dispozici, což téměř úplně eliminuje stav načítání.

Zvažte zdroj pro načítání 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;
    },
  };
};

// Použití:
const productResource = createProductResource(123);

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

Nyní můžete tento zdroj přednačíst ještě před vykreslením komponenty ProductDetails. Například během přechodů mezi routami nebo při najetí myší.

React.preload(productResource);

Tím je zajištěno, že data budou pravděpodobně dostupná v okamžiku, kdy je komponenta ProductDetails bude potřebovat, což minimalizuje nebo eliminuje stav načítání.

2. Použití `Promise.all` pro souběžné načítání dat

Dalším jednoduchým a efektivním přístupem je použití Promise.all k souběžnému zahájení všech načítání dat v rámci jedné Suspense hranice. To funguje dobře, když jsou závislosti dat známy předem.

Vraťme se k příkladu uživatelského profilu. Namísto postupného načítání dat můžeme načíst jméno, avatar a kanál aktivity souběžně:

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

async function fetchName() {
  // Simulace API volání
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

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

async function fetchActivity(name) {
  // Simulace API volání
  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>Načítám Avatar...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>Načítám Aktivitu...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

Pokud však `Avatar` a `Activity` také spoléhají na `fetchName`, ale jsou vykresleny uvnitř samostatných suspense hranic, můžete promise `fetchName` povznést k rodiči a poskytnout ji prostřednictvím React Contextu.

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

async function fetchName() {
  // Simulace API volání
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

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

async function fetchActivity(name) {
  // Simulace API volání
  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>Načítám Avatar...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>Načítám Aktivitu...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. Použití vlastního hooku pro správu paralelních načítání

Pro složitější scénáře s potenciálně podmíněnými datovými závislostmi můžete vytvořit vlastní hook pro správu paralelního načítání dat a vrátit zdroj, který Suspense může použít.

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

// Příklad použití:
async function fetchUserData(userId) {
  // Simulace API volání
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Simulace API volání
  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>Načítám uživatelská data...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

Tento přístup zapouzdřuje složitost správy promizů a stavů načítání do hooku, čímž je kód komponenty čistší a více zaměřený na renderování dat.

4. Selektivní hydratace se streamovaným serverovým renderováním

Pro serverem renderované aplikace React 18 zavádí selektivní hydrataci se streamovaným serverovým renderováním. To vám umožňuje posílat HTML klientovi po částech, jakmile je k dispozici na serveru. Komponenty s pomalým načítáním můžete zabalit do hranic <Suspense>, což umožní zbytku stránky stát se interaktivním, zatímco pomalé komponenty se stále načítají na serveru. To dramaticky zlepšuje vnímaný výkon, zejména pro uživatele s pomalým síťovým připojením nebo zařízeními.

Zvažte scénář, kdy zpravodajský web potřebuje zobrazovat články z různých regionů světa (např. Asie, Evropa, Amerika). Některé datové zdroje mohou být pomalejší než jiné. Selektivní hydratace umožňuje zobrazit články z rychlejších regionů jako první, zatímco ty z pomalejších regionů se stále načítají, čímž se zabrání zablokování celé stránky.

Zpracování chyb a stavů načítání

Zatímco Suspense zjednodušuje správu stavu načítání, zpracování chyb zůstává klíčové. Error boundaries (pomocí metody životního cyklu componentDidCatch nebo hooku useErrorBoundary z knihoven jako `react-error-boundary`) vám umožňují elegantně zpracovávat chyby, které nastanou během načítání dat nebo renderování. Tyto error boundaries by měly být umístěny strategicky, aby zachytávaly chyby v rámci specifických Suspense hranic a zabránily pádu celé aplikace.

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

function MyComponent() {
  // ... načítá data, která mohou způsobit chybu
}

function App() {
  return (
    <ErrorBoundary fallback={<div>Něco se pokazilo!</div>}>
      <Suspense fallback={<div>Načítám...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Nezapomeňte poskytnout informativní a uživatelsky přívětivé záložní uživatelské rozhraní pro stavy načítání i chyb. To je obzvláště důležité pro mezinárodní uživatele, kteří se mohou potýkat s pomalejší rychlostí sítě nebo regionálními výpadky služeb.

Osvědčené postupy pro optimalizaci načítání dat se Suspense

• Identifikujte a prioritizujte kritická data: Určete, která data jsou nezbytná pro počáteční vykreslení vaší aplikace, a prioritizujte jejich načítání jako první.
• Přednačtěte data, kdykoli je to možné: Použijte `React.preload` a zdroje k přednačtení dat dříve, než je komponenty potřebují, čímž minimalizujete stavy načítání.
• Načítejte data souběžně: Využijte `Promise.all` nebo vlastní hooky k zahájení vícenásobného paralelního načítání dat.
• Optimalizujte API endpointy: Zajistěte, aby vaše API endpointy byly optimalizovány pro výkon, minimalizovaly latenci a velikost datové zátěže. Zvažte použití technik jako GraphQL pro načítání pouze potřebných dat.
• Implementujte cachování: Cachujte často přístupná data, abyste snížili počet požadavků na API. Zvažte použití knihoven jako `swr` nebo `react-query` pro robustní cachovací schopnosti.
• Použijte rozdělení kódu (Code Splitting): Rozdělte svou aplikaci na menší části, abyste zkrátili počáteční dobu načítání. Kombinujte rozdělení kódu se Suspense pro postupné načítání a vykreslování různých částí vaší aplikace.
• Monitorujte výkon: Pravidelně monitorujte výkon vaší aplikace pomocí nástrojů jako Lighthouse nebo WebPageTest k identifikaci a řešení úzkých míst výkonu.
• Elegantně zpracovávejte chyby: Implementujte error boundaries pro zachycení chyb během načítání dat a renderování, poskytující uživatelům informativní chybové zprávy.
• Zvažte server-side rendering (SSR): Z důvodů SEO a výkonu zvažte použití SSR se streamováním a selektivní hydratací pro rychlejší počáteční zážitek.

Závěr

React Suspense, v kombinaci se strategiemi pro paralelní načítání dat, poskytuje výkonný soubor nástrojů pro budování responzivních a výkonných webových aplikací. Díky pochopení problému vodopádu a implementaci technik, jako je přednačítání, souběžné načítání pomocí Promise.all a vlastních hooků, můžete výrazně zlepšit uživatelský zážitek. Nezapomeňte elegantně zpracovávat chyby a monitorovat výkon, abyste zajistili, že vaše aplikace zůstane optimalizovaná pro uživatele po celém světě. Jelikož se React neustále vyvíjí, zkoumání nových funkcí, jako je selektivní hydratace se streamovaným serverovým renderováním, dále posílí vaši schopnost poskytovat výjimečné uživatelské zážitky, bez ohledu na polohu nebo síťové podmínky. Přijetím těchto technik můžete vytvářet aplikace, které jsou nejen funkční, ale také potěšením pro vaše globální publikum.

Tento blogový příspěvek si klade za cíl poskytnout komplexní přehled strategií paralelního načítání dat s React Suspense. Doufáme, že jste jej shledali informativním a užitečným. Doporučujeme vám experimentovat s těmito technikami ve vlastních projektech a sdílet své poznatky s komunitou.