Next.jsのパフォーマンス向上の秘訣 - 並列実行の活用

2024/06/20

近年、ウェブサイトのパフォーマンス向上は至上命題となっています。
Next.jsを使用したサイトで、表示にかかる時間が5秒以上かかるなどの課題がありました。
本記事では、その解決策として、「並列実行」を活用することで、サイトのパフォーマンスを飛躍的に向上させ、TTFB（Time to First Byte）を改善する方法をご紹介します。

直列実行

最初に、サイトの表示速度の問題点を特定しました。
特に注視されるのがTTFB（サーバー初期応答時間）であり、ページ表示に必要なデータを取得する処理が直列的に行われていました。

以下は直列実行のコード例です。1つのデータ取得が終わるまで、次の処理を待つため、全体の処理時間が長くなります。

async function fetchDataSerial() {
  try {
    const data1 = await getdata1();

    // `getdata1`関数の処理が完了してから実行
    const data2 = await getdata2();

    // `getdata2`関数の処理が完了してから実行
    const data3 = await getdata3();
    
    return {data1, data2, data3}
    // データの加工や表示に関する処理
  } catch (error) {
    console.error('データの取得に失敗しました', error);
  }
}

これが原因で、サイトのTTFBが遅くなっていました。

並列実行の導入

解決策として、Promise.all を使用してデータの並列実行を導入しました。
これにより、各データの取得が同時に行われ、TTFBが改善されました。

async function fetchDataParallel() {
  try {
    const [data1, data2, data3] = await Promise.all([
      getdata1(), 
      getdata2(), 
      getdata3()
    ]);

    return {data1, data2, data3}

    // データの加工や表示に関する処理
  } catch (error) {
    console.error('データの取得に失敗しました', error);
  }
}

パフォーマンス向上の効果

並列実行を導入することで、サイトの表示速度が光速化し、特にTTFBが改善されました。
TTFBの向上は、ユーザーがサイトにアクセスしてから最初のバイトが受信されるまでの時間を短縮し、ユーザーエクスペリエンスの向上に繋がります。

並列実行が使えない例

並列実行が使えないパターンもあります。
前の処理で取得したデータが次の処理で必要な場合です。
この場合は直列に実行する必要があります。

async function fetchDataSerial() {
  try {
    const data1 = await getdata1();

    // `data1`が引数として必要
    const data2 = await getdata2(data1);

    // `data2`が引数として必要
    const data3 = await getdata3(data2);
    
    return {data1, data2, data3}
    // データの加工や表示に関する処理
  } catch (error) {
    console.error('データの取得に失敗しました', error);
  }
}

Next.jsサイトのパフォーマンス向上には様々な手法がありますが、今回ご紹介した並列実行はTTFBの改善に特に効果的でした。
サイトの表示速度を改善するために、ぜひこの手法を取り入れてみてください。ユーザーの満足度が向上し、サイトの成功につながることでしょう。