React Suspense調整：並列データフェッチをマスターする

React Suspenseは、非同期処理、特にデータフェッチの処理方法に革命をもたらしました。データが読み込まれるのを待機中にコンポーネントがレンダリングを「サスペンド」することを可能にし、ローディング状態を管理するための宣言的な方法を提供します。しかし、個々のデータフェッチをSuspenseでラップするだけでは、ウォーターフォール効果につながり、1つのフェッチが完了してから次のフェッチが開始されるため、パフォーマンスに悪影響を及ぼす可能性があります。このブログ記事では、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`とリソースを使用したデータのプリロード

最も強力なテクニックの1つは、コンポーネントがレンダリングされる前にデータをプリロードすることです。これには、「リソース」（データフェッチpromiseをカプセル化するオブジェクト）を作成し、データを事前にフェッチすることが含まれます。`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;
    },
  };
};

// 用法：
const productResource = createProductResource(123);

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

これで、ProductDetailsコンポーネントがレンダリングされる前に、このリソースをプリロードできます。たとえば、ルート遷移中やホバー時に。

React.preload(productResource);

これにより、ProductDetailsコンポーネントが必要とするときまでにデータが利用可能になり、ローディング状態が最小限に抑えられたり、排除されたりする可能性が高まります。

2. `Promise.all`を使用した同時データフェッチ

もう1つのシンプルで効果的なアプローチは、Promise.allを使用して、1つのSuspense境界内で同時にすべてのデータフェッチを開始することです。これは、データの依存関係が事前にわかっている場合に適しています。

ユーザープロファイルの例をもう一度見てみましょう。データを順番にフェッチする代わりに、名前、アバター、アクティビティフィードを同時にフェッチできます。

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

async function fetchName() {
  // API呼び出しをシミュレート
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // API呼び出しをシミュレート
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // API呼び出しをシミュレート
  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>ローディングアバター...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>ローディングアクティビティ...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

ただし、`Avatar`と`Activity`のそれぞれが`fetchName`にも依存しているが、個別のsuspense境界内でレンダリングされる場合、`fetchName`promiseを親に持ち上げてReact Contextを介して提供できます。

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

async function fetchName() {
  // API呼び出しをシミュレート
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // API呼び出しをシミュレート
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // API呼び出しをシミュレート
  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>ローディングアバター...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>ローディングアクティビティ...</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('リソースはまだ初期化されていません');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// 使用例：
async function fetchUserData(userId) {
  // API呼び出しをシミュレート
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // API呼び出しをシミュレート
  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>ユーザーデータをロードしています...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

このアプローチは、フック内でpromiseとローディング状態を管理する複雑さをカプセル化し、コンポーネントコードをよりクリーンにし、データのレンダリングに集中させます。

4. ストリーミングサーバーレンダリングによる選択的ハイドレーション

サーバーレンダリングされたアプリケーションの場合、React 18はストリーミングサーバーレンダリングによる選択的ハイドレーションを導入しています。これにより、サーバーで利用可能になったときに、HTMLをチャンク単位でクライアントに送信できます。読み込みの遅いコンポーネントを<Suspense>境界でラップすることにより、サーバーで遅いコンポーネントがまだ読み込まれている間に、ページの残りの部分をインタラクティブにすることができます。これにより、特にネットワーク接続やデバイスの遅いユーザーに対して、知覚パフォーマンスが劇的に向上します。

ニュースウェブサイトが、世界のさまざまな地域（たとえば、アジア、ヨーロッパ、南北アメリカ）からの記事を表示する必要があるシナリオを考えてみましょう。一部のデータソースは、他のデータソースよりも遅い場合があります。選択的ハイドレーションにより、より高速な地域からの記事を最初に表示し、遅い地域からの記事がまだ読み込まれている間でも、ページ全体がブロックされるのを防ぐことができます。

エラーとローディング状態の処理

Suspenseはローディング状態の管理を簡素化しますが、エラー処理は依然として重要です。エラー境界（componentDidCatchライフサイクルメソッドを使用するか、`react-error-boundary`などのライブラリのuseErrorBoundaryフックを使用）を使用すると、データフェッチまたはレンダリング中に発生したエラーを適切に処理できます。これらのエラー境界は、特定のSuspense境界内でエラーをキャッチするように戦略的に配置し、アプリケーション全体がクラッシュするのを防ぎます。

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

function MyComponent() {
  // ... エラーが発生する可能性のあるデータをフェッチします
}

function App() {
  return (
    <ErrorBoundary fallback={<div>問題が発生しました！</div>}>
      <Suspense fallback={<div>ローディング...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

ローディング状態とエラー状態の両方に、情報的でユーザーフレンドリーなフォールバックUIを提供することを忘れないでください。これは、ネットワーク速度が遅いか、地域的なサービス停止に遭遇する可能性がある国際的なユーザーにとって特に重要です。

Suspenseでデータフェッチを最適化するためのベストプラクティス

• 重要なデータの特定と優先順位付け：アプリケーションの最初のレンダリングに不可欠なデータを特定し、そのデータを最初にフェッチすることを優先します。
• 可能な場合はデータをプリロードする：React.preloadとリソースを使用して、コンポーネントが必要とする前にデータをプリロードし、ローディング状態を最小限に抑えます。
• データを同時にフェッチする：Promise.allまたはカスタムフックを使用して、複数のデータフェッチを並列に開始します。
• APIエンドポイントを最適化する：APIエンドポイントがパフォーマンスのために最適化され、レイテンシとペイロードサイズが最小限に抑えられるようにします。GraphQLなどのテクニックを使用して、必要なデータのみをフェッチすることを検討してください。
• キャッシュを実装する：頻繁にアクセスされるデータをキャッシュして、APIリクエストの数を減らします。堅牢なキャッシュ機能のために、`swr`や`react-query`などのライブラリを使用することを検討してください。
• コード分割を使用する：アプリケーションを小さなチャンクに分割して、初期読み込み時間を短縮します。コード分割とSuspenseを組み合わせて、アプリケーションのさまざまな部分を段階的にロードしてレンダリングします。
• パフォーマンスを監視する：LighthouseやWebPageTestなどのツールを使用して、アプリケーションのパフォーマンスを定期的に監視し、パフォーマンスのボトルネックを特定して対処します。
• エラーを適切に処理する：データフェッチとレンダリング中にエラーをキャッチするエラー境界を実装し、ユーザーに情報的なエラーメッセージを提供します。
• サーバーサイドレンダリング（SSR）を検討する：SEOとパフォーマンスの理由から、ストリーミングと選択的ハイドレーションを使用したSSRを使用して、より高速な初期エクスペリエンスを提供することを検討してください。

結論

並列データフェッチの戦略と組み合わせると、React Suspenseは、応答性が高くパフォーマンスの高いWebアプリケーションを構築するための強力なツールキットを提供します。ウォーターフォール問題の理解と、プリロード、Promise.allを使用した同時フェッチ、カスタムフックなどのテクニックの実装により、ユーザーエクスペリエンスを大幅に向上させることができます。エラーを適切に処理し、パフォーマンスを監視して、アプリケーションが世界中のユーザー向けに最適化された状態を維持していることを確認してください。Reactが進化し続けるにつれて、ストリーミングサーバーレンダリングによる選択的ハイドレーションなどの新機能を調査することで、場所やネットワーク状況に関係なく、優れたユーザーエクスペリエンスを提供するための能力がさらに向上します。これらのテクニックを採用することで、機能的であるだけでなく、グローバルな視聴者にとって使用するのが楽しいアプリケーションを作成できます。

このブログ記事は、React Suspenseを使用した並列データフェッチ戦略の包括的な概要を提供することを目的としています。参考になったと思っていただければ幸いです。これらのテクニックを独自のプロジェクトで試して、コミュニティとあなたの知見を共有することをお勧めします。