25 серпня 2025 р.Українська

Вивчайте передові методи паралельного завантаження даних у React за допомогою Suspense, покращуючи продуктивність застосунку та досвід користувача. Дізнайтеся про стратегії координації кількох асинхронних операцій та ефективного керування станами завантаження.

React Suspense Coordination: Освоєння паралельного завантаження даних

React Suspense революціонізував спосіб обробки асинхронних операцій, особливо завантаження даних. Він дозволяє компонентам "призупиняти" рендеринг під час очікування завантаження даних, забезпечуючи декларативний спосіб керування станами завантаження. Однак, просте обгортання окремих завантажень даних за допомогою Suspense може призвести до ефекту водоспаду, коли одне завантаження завершується до початку наступного, що негативно впливає на продуктивність. Ця публікація в блозі заглиблюється в передові стратегії координації кількох завантажень даних паралельно за допомогою Suspense, оптимізуючи чуйність вашого застосунку та покращуючи досвід користувача для глобальної аудиторії.

Розуміння проблеми водоспаду в завантаженні даних

Уявіть сценарій, коли вам потрібно відобразити профіль користувача з його ім'ям, аватаром і останньою активністю. Якщо ви завантажуєте кожну частину даних послідовно, користувач бачить індикатор завантаження для імені, потім інший для аватара і, нарешті, один для стрічки активності. Цей послідовний шаблон завантаження створює ефект водоспаду, затримуючи рендеринг повного профілю та розчаровуючи користувачів. Для міжнародних користувачів із різною швидкістю мережі ця затримка може бути ще більш вираженою.

Розглянемо цей спрощений фрагмент коду:


function UserProfile() {
  const name = useName(); // Завантажує ім'я користувача
  const avatar = useAvatar(name); // Завантажує аватар на основі імені
  const activity = useActivity(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>
  );
}

У цьому прикладі useAvatar і useActivity залежать від результату useName. Це створює чіткий водоспад – useAvatar і useActivity не можуть почати завантаження даних, поки useName не завершиться. Це неефективно і є поширеним вузьким місцем продуктивності.

Стратегії паралельного завантаження даних за допомогою Suspense

Ключем до оптимізації завантаження даних за допомогою Suspense є ініціювання всіх запитів даних одночасно. Ось кілька стратегій, які ви можете застосувати:

1. Попереднє завантаження даних за допомогою `React.preload` і ресурсів

Одним з найпотужніших методів є попереднє завантаження даних до того, як компонент навіть відрендериться. Це передбачає створення "ресурсу" (об'єкта, який інкапсулює обіцянку завантаження даних) і попереднє отримання даних. `React.preload` допомагає в цьому. До моменту, коли компонент потребує даних, вони вже доступні, майже повністю усуваючи стан завантаження.

Розглянемо ресурс для отримання продукту:


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

Тепер ви можете попередньо завантажити цей ресурс до того, як компонент ProductDetails буде відрендерено. Наприклад, під час переходу між маршрутами або при наведенні курсора.


React.preload(productResource);

Це гарантує, що дані, ймовірно, будуть доступні до того моменту, коли компонент ProductDetails потребуватиме їх, мінімізуючи або усуваючи стан завантаження.

2. Використання `Promise.all` для паралельного завантаження даних

Іншим простим і ефективним підходом є використання Promise.all для ініціювання всіх завантажень даних одночасно в межах однієї межі Suspense. Це добре працює, коли залежності даних відомі заздалегідь.

Давайте повернемося до прикладу профілю користувача. Замість послідовного завантаження даних, ми можемо завантажувати ім'я, аватар і стрічку активності одночасно:


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;

Однак, якщо кожен з `Avatar` і `Activity` також покладаються на `fetchName`, але відтворюються всередині окремих меж suspense, ви можете підняти обіцянку `fetchName` до батьківського елемента та надати її через 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. Використання власного хука для керування паралельними завантаженнями

Для складніших сценаріїв з потенційно умовними залежностями даних ви можете створити власний хук для керування паралельним завантаженням даних і повернення ресурсу, який може використовувати Suspense.


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;

Цей підхід інкапсулює складність керування обіцянками та станами завантаження всередині хука, роблячи код компонента чистішим і більш зосередженим на рендерингу даних.

4. Вибіркова гідратація з потоковою серверною візуалізацією

Для програм, відтворених на сервері, React 18 представляє вибіркову гідратацію з потоковою серверною візуалізацією. Це дозволяє надсилати HTML клієнту частинами, оскільки він стає доступним на сервері. Ви можете обернути компоненти, які повільно завантажуються, межами <Suspense>, дозволяючи решті сторінки стати інтерактивною, поки повільні компоненти ще завантажуються на сервері. Це значно покращує сприйняту продуктивність, особливо для користувачів з повільним з'єднанням або пристроями.

Розглянемо сценарій, коли веб-сайт новин має відображати статті з різних регіонів світу (наприклад, Азії, Європи, Америки). Деякі джерела даних можуть бути повільнішими за інші. Вибіркова гідратація дозволяє відображати статті з швидших регіонів першими, тоді як статті з повільніших регіонів ще завантажуються, запобігаючи блокуванню всієї сторінки.

Обробка помилок і станів завантаження

Хоча Suspense спрощує керування станом завантаження, обробка помилок залишається вирішальною. Межі помилок (використовуючи метод життєвого циклу componentDidCatch або хук useErrorBoundary з бібліотек, таких як `react-error-boundary`) дозволяють вам коректно обробляти помилки, які виникають під час завантаження або рендерингу даних. Ці межі помилок слід розміщувати стратегічно, щоб перехоплювати помилки в межах певних меж Suspense, запобігаючи збою всього застосунку.


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

Не забудьте надати інформативний і зручний для користувача резервний інтерфейс як для станів завантаження, так і для станів помилок. Це особливо важливо для міжнародних користувачів, які можуть стикатися з повільнішою швидкістю мережі або регіональними відключеннями служб.

Найкращі практики для оптимізації завантаження даних за допомогою Suspense

Визначте та розставте пріоритети для важливих даних: Визначте, які дані є важливими для початкового рендерингу вашого застосунку, і спочатку визначте пріоритет для їх завантаження.
Попередньо завантажуйте дані, коли це можливо: Використовуйте `React.preload` і ресурси для попереднього завантаження даних до того, як вони знадобляться компонентам, мінімізуючи стани завантаження.
Завантажуйте дані одночасно: Використовуйте `Promise.all` або власні хуки для ініціювання кількох завантажень даних паралельно.
Оптимізуйте кінцеві точки API: Переконайтеся, що ваші кінцеві точки API оптимізовані для продуктивності, мінімізуючи затримку та розмір корисного навантаження. Розгляньте можливість використання таких технік, як GraphQL, щоб отримати лише потрібні дані.
Реалізуйте кешування: Кешуйте дані, до яких часто звертаються, щоб зменшити кількість запитів API. Розгляньте можливість використання таких бібліотек, як `swr` або `react-query` для надійних можливостей кешування.
Використовуйте розділення коду: Розділіть свій застосунок на менші частини, щоб зменшити час початкового завантаження. Поєднайте розділення коду з Suspense, щоб поступово завантажувати та відтворювати різні частини вашого застосунку.
Відстежуйте продуктивність: Регулярно відстежуйте продуктивність вашого застосунку за допомогою таких інструментів, як Lighthouse або WebPageTest, щоб виявляти та усувати вузькі місця продуктивності.
Коректно обробляйте помилки: Реалізуйте межі помилок для перехоплення помилок під час завантаження та рендерингу даних, надаючи користувачам інформативні повідомлення про помилки.
Розгляньте можливість рендерингу на стороні сервера (SSR): З міркувань SEO та продуктивності розгляньте можливість використання SSR з потоковою та вибірковою гідратацією для забезпечення швидшого початкового досвіду.

Висновок

React Suspense, у поєднанні зі стратегіями паралельного завантаження даних, надає потужний набір інструментів для створення чуйних і продуктивних веб-застосунків. Розуміючи проблему водоспаду та реалізуючи такі методи, як попереднє завантаження, одночасне завантаження за допомогою Promise.all і власні хуки, ви можете значно покращити досвід користувача. Не забудьте коректно обробляти помилки та відстежувати продуктивність, щоб забезпечити оптимізацію вашого застосунку для користувачів у всьому світі. Оскільки React продовжує розвиватися, вивчення нових функцій, таких як вибіркова гідратація з потоковою серверною візуалізацією, ще більше розширить ваші можливості щодо надання виняткового досвіду користувача, незалежно від місцезнаходження чи умов мережі. Застосовуючи ці методи, ви можете створювати програми, які не лише функціональні, але й приємні у використанні для вашої глобальної аудиторії.

Ця публікація в блозі була спрямована на надання вичерпного огляду стратегій паралельного завантаження даних за допомогою React Suspense. Ми сподіваємося, що ви знайшли її інформативною та корисною. Ми заохочуємо вас експериментувати з цими методами у своїх власних проектах і ділитися своїми результатами з спільнотою.