Koordinácia React Suspense: Zvládnutie paralélneho získavania údajov

React Suspense priniesol revolúciu do spôsobu, akým spracovávame asynchrónne operácie, najmä získavanie údajov. Umožňuje komponentom "pozastaviť" vykresľovanie počas čakania na načítanie údajov, čím poskytuje deklaratívny spôsob riadenia stavov načítavania. Jednoduché obalenie jednotlivých získavaní údajov pomocou Suspense však môže viesť k efektu vodopádu, kde sa jedno získanie dokončí skôr, než sa začne ďalšie, čo negatívne ovplyvňuje výkon. Tento blogový príspevok sa zameriava na pokročilé stratégie koordinácie viacerých získavaní údajov paralelne pomocou Suspense, optimalizáciu odozvy vašej aplikácie a zlepšenie používateľskej skúsenosti pre globálne publikum.

Pochopenie problému vodopádu pri získavaní údajov

Predstavte si scenár, kde potrebujete zobraziť používateľský profil s menom, avatarom a nedávnou aktivitou. Ak získavate každú časť údajov postupne, používateľ vidí indikátor načítania pre meno, potom ďalší pre avatar a nakoniec jeden pre informačný kanál aktivity. Tento sekvenčný vzor načítania vytvára efekt vodopádu, čo oneskoruje vykreslenie kompletného profilu a frustruje používateľov. Pre medzinárodných používateľov s rôznymi rýchlosťami siete môže byť toto oneskorenie ešte výraznejšie.

Zvážte tento zjednodušený úryvok kódu:

function UserProfile() {
  const name = useName(); // Získava meno používateľa
  const avatar = useAvatar(name); // Získava avatar na základe mena
  const activity = useActivity(name); // Získava aktivitu na základe mena

  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 príklade sú useAvatar a useActivity závislé od výsledku useName. To vytvára jasný vodopád – useAvatar a useActivity nemôžu začať získavať údaje, kým sa nedokončí useName. To je neefektívne a predstavuje časté prekážky výkonu.

Stratégie paralélneho získavania údajov pomocou Suspense

Kľúčom k optimalizácii získavania údajov pomocou Suspense je inicializovať všetky požiadavky na údaje súbežne. Tu je niekoľko stratégií, ktoré môžete použiť:

1. Prednačítanie údajov pomocou `React.preload` a zdrojov

Jednou z najvýkonnejších techník je prednačítanie údajov predtým, ako sa komponent vôbec vykreslí. To zahŕňa vytvorenie "zdroja" (objekt, ktorý zapuzdruje promise na získavanie údajov) a predbežné získavanie údajov. `React.preload` s tým pomáha. V čase, keď komponent potrebuje údaje, sú už k dispozícii, čím sa stav načítania takmer úplne eliminuje.

Zvážte zdroj na získavanie 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žitie:
const productResource = createProductResource(123);

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

Teraz môžete tento zdroj prednačítať predtým, ako sa vykreslí komponent ProductDetails. Napríklad počas prechodov medzi routami alebo pri nabehnutí myšou.

React.preload(productResource);

To zaisťuje, že údaje budú pravdepodobne k dispozícii v čase, keď ich komponent ProductDetails bude potrebovať, čím sa minimalizuje alebo eliminuje stav načítania.

2. Použitie `Promise.all` pre súbežné získavanie údajov

Ďalším jednoduchým a efektívnym prístupom je použitie Promise.all na súbežnú inicializáciu všetkých získavaní údajov v rámci jedného Suspense boundary. To funguje dobre, keď sú závislosti údajov známe vopred.

Vráťme sa k príkladu používateľského profilu. Namiesto postupného získavania údajov môžeme súbežne získať meno, avatar a informačný kanál aktivity:

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

async function fetchName() {
  // Simulácia volania API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

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

async function fetchActivity(name) {
  // Simulácia volania API
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Pridal fotku' },
    { id: 2, text: 'Aktualizoval profil' },
  ];
}

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čítava sa Avatar...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>Načítava sa Aktivita...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

Ak však každý z `Avatar` a `Activity` tiež závisí od `fetchName`, ale sú vykreslené v rámci samostatných suspense boundaries, môžete promise `fetchName` zdvihnúť k rodičovi a poskytnúť ho cez React Context.

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

async function fetchName() {
  // Simulácia volania API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

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

async function fetchActivity(name) {
  // Simulácia volania API
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Pridal fotku' },
    { id: 2, text: 'Aktualizoval profil' },
  ];
}

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čítava sa Avatar...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>Načítava sa Aktivita...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. Použitie vlastného hooku na správu paralélnych získavaní

Pre zložitejšie scenáre s potenciálne podmienenými dátovými závislosťami môžete vytvoriť vlastný hook na správu paralélneho získavania dát a vrátiť zdroj, ktorý môže Suspense použiť.

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

// Príklad použitia:
async function fetchUserData(userId) {
  // Simulácia volania API
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Simulácia volania API
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: 'Príspevok 1' }, { id: 2, title: 'Príspevok 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čítava sa používateľské údaje...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

Tento prístup zapuzdruje zložitosť správy promises a stavov načítania v rámci hooku, čím je kód komponentu čistejší a viac zameraný na vykresľovanie údajov.

4. Selektívna hydratácia so streamovaním renderovania na serveri

Pre aplikácie vykresľované na serveri React 18 zavádza selektívnu hydratáciu so streamovaním renderovania na serveri. To vám umožňuje posielať HTML klientovi po častiach, ako sa stáva dostupným na serveri. Pomalé komponenty môžete obaliť do <Suspense> hraníc, čím sa zvyšok stránky stane interaktívnym, zatiaľ čo pomalé komponenty sa stále načítavajú na serveri. To dramaticky zlepšuje vnímaný výkon, najmä pre používateľov s pomalým pripojením k sieti alebo zariadeniami.

Zvážte scenár, kde spravodajská webová stránka potrebuje zobrazovať články z rôznych regiónov sveta (napr. Ázia, Európa, Ameriky). Niektoré dátové zdroje môžu byť pomalšie ako iné. Selektívna hydratácia umožňuje najprv zobraziť články z rýchlejších regiónov, zatiaľ čo tie z pomalších regiónov sa stále načítavajú, čím sa zabráni zablokovaniu celej stránky.

Správa chýb a stavov načítania

Zatiaľ čo Suspense zjednodušuje správu stavu načítania, správa chýb zostáva kľúčová. Error boundaries (pomocou metódy životného cyklu componentDidCatch alebo hooku useErrorBoundary z knižníc ako `react-error-boundary`) vám umožňujú elegantne spracovať chyby, ktoré nastanú počas získavania dát alebo vykresľovania. Tieto error boundaries by mali byť umiestnené strategicky tak, aby zachytávali chyby v rámci špecifických Suspense hraníc, čím sa zabráni pádu celej aplikácie.

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

function MyComponent() {
  // ... získava dáta, ktoré môžu spôsobiť chybu
}

function App() {
  return (
    <ErrorBoundary fallback={<div>Niečo sa pokazilo!</div>}>
      <Suspense fallback={<div>Načítava sa...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Nezabudnite poskytnúť informatívne a používateľsky prívetivé náhradné UI pre stavy načítania aj chyby. To je obzvlášť dôležité pre medzinárodných používateľov, ktorí sa môžu stretávať s pomalšími rýchlosťami siete alebo regionálnymi výpadkami služieb.

Osvedčené postupy pre optimalizáciu získavania dát pomocou Suspense

• Identifikujte a prioritizujte kritické údaje: Určite, ktoré údaje sú nevyhnutné pre počiatočné vykreslenie vašej aplikácie, a prioritizujte ich získavanie ako prvé.
• Prednačítajte údaje, keď je to možné: Použite `React.preload` a zdroje na prednačítanie údajov predtým, ako ich komponenty potrebujú, čím minimalizujete stavy načítania.
• Získavajte údaje súbežne: Využite `Promise.all` alebo vlastné hooky na inicializáciu viacerých získavaní údajov paralelne.
• Optimalizujte API koncové body: Zabezpečte, aby boli vaše API koncové body optimalizované pre výkon, minimalizujúc latenciu a veľkosť payloadu. Zvážte použitie techník ako GraphQL na získavanie iba tých údajov, ktoré potrebujete.
• Implementujte cachovanie: Cachujte často pristupované údaje, aby ste znížili počet požiadaviek API. Zvážte použitie knižníc ako `swr` alebo `react-query` pre robustné možnosti cachovania.
• Použite rozdelenie kódu (Code Splitting): Rozdeľte svoju aplikáciu na menšie časti, aby ste znížili počiatočný čas načítania. Skombinujte rozdelenie kódu so Suspense na postupné načítavanie a vykresľovanie rôznych častí vašej aplikácie.
• Monitorujte výkon: Pravidelne monitorujte výkon vašej aplikácie pomocou nástrojov ako Lighthouse alebo WebPageTest na identifikáciu a riešenie prekážok výkonu.
• Elegantne spravujte chyby: Implementujte error boundaries na zachytávanie chýb počas získavania a vykresľovania dát, poskytujúc používateľom informatívne chybové správy.
• Zvážte renderovanie na strane servera (SSR): Pre dôvody SEO a výkonu zvážte použitie SSR so streamovaním a selektívnou hydratáciou na poskytnutie rýchlejšej počiatočnej skúsenosti.

Záver

React Suspense v kombinácii so stratégiami paralélneho získavania dát poskytuje výkonnú sadu nástrojov pre budovanie responzívnych a výkonných webových aplikácií. Pochopením problému vodopádu a implementáciou techník ako prednačítanie, súbežné získavanie pomocou Promise.all a vlastných hookov, môžete výrazne zlepšiť používateľskú skúsenosť. Nezabudnite elegantne spracovávať chyby a monitorovať výkon, aby vaša aplikácia zostala optimalizovaná pre používateľov na celom svete. Keďže sa React neustále vyvíja, skúmanie nových funkcií ako selektívna hydratácia so streamovaním renderovania na serveri ďalej posilní vašu schopnosť poskytovať výnimočné používateľské skúsenosti, bez ohľadu na polohu alebo sieťové podmienky. Prijatím týchto techník môžete vytvárať aplikácie, ktoré sú nielen funkčné, ale aj radosť používať pre vaše globálne publikum.

Tento blogový príspevok mal za cieľ poskytnúť komplexný prehľad stratégií paralélneho získavania dát pomocou React Suspense. Dúfame, že ste ho našli informatívnym a užitočným. Odporúčame vám experimentovať s týmito technikami vo vlastných projektoch a zdieľať svoje zistenia s komunitou.