frontend-async-best-practices

非同期処理のベストプラクティス

非同期 JavaScript コードのパフォーマンス最適化パターンです。リクエストのウォーターフォールを解消し、並列性を最大限に高めることに重点を置いた 5 つのルールを紹介します。

影響度：重大 — ウォーターフォールはパフォーマンス低下の最大の原因です。逐次的な await を追加するたびに、ネットワーク遅延がそのまま加算されます。

適用する場面

次の場合に、これらのガイドラインを参照してください。

• Remix のローダーまたはアクションを作成するとき
• データ取得ロジックを実装するとき
• 複数の非同期処理を扱うとき
• ウォーターフォールパターンがないかコードをレビューするとき
• 応答時間を最適化するとき

ルールの概要

parallel（重大）— @rules/parallel.md

独立した処理には Promise.all() を使用します。

// Bad: 3 sequential round trips
const user = await fetchUser();
const posts = await fetchPosts();
const comments = await fetchComments();

// Good: 1 parallel round trip
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments(),
]);

defer-await（高）— @rules/defer-await.md

実際に使用する分岐内に await を移動します。

// Bad: always waits even when skipping
async function handle(skip: boolean) {
  let data = await fetchData();
  if (skip) return { skipped: true };
  return process(data);
}

// Good: only waits when needed
async function handle(skip: boolean) {
  if (skip) return { skipped: true };
  let data = await fetchData();
  return process(data);
}

dependencies（重大）— @rules/dependencies.md

依存する処理は順につなぎ、独立した処理は並列化します。

// Bad: profile waits for config unnecessarily
const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
const profile = await fetchProfile(user.id);

// Good: profile starts as soon as user resolves
const userPromise = fetchUser();
const profilePromise = userPromise.then((user) => fetchProfile(user.id));

const [user, config, profile] = await Promise.all([
  userPromise,
  fetchConfig(),
  profilePromise,
]);

api-routes（重大）— @rules/api-routes.md

ローダーでは早めに Promise を開始し、await は最後に行います。

// Bad: sequential execution
export async function loader() {
  let session = await auth();
  let config = await fetchConfig();
  return { session, config };
}

// Good: parallel execution
export async function loader() {
  let sessionPromise = auth();
  let configPromise = fetchConfig();
  const [session, config] = await Promise.all([sessionPromise, configPromise]);
  return { session, config };
}

suspense-boundaries（高）— @rules/suspense-boundaries.md

データの読み込み中に UI をすぐ表示するには、Suspense を使用します。

// Bad: entire page blocked by data
async function Page() {
  let data = await fetchData();
  return (
    <Layout>
      <Content data={data} />
    </Layout>
  );
}

// Good: layout shows immediately, content streams in
function Page() {
  return (
    <Layout>
      <Suspense fallback={<Skeleton />}>
        <Content />
      </Suspense>
    </Layout>
  );
}