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. Мы надеемся, что вы нашли его информативным и полезным. Мы рекомендуем вам экспериментировать с этими методами в своих собственных проектах и делиться своими выводами с сообществом.