サーバーが HTML を返すまでが遅いと分かりました。次はどうしますか。
そのページのデータ取得を洗い出して個別に時間を測ります。よくあるのは、互いに依存しない取得を直列に await しているケースです。並行にすれば最も遅い1本の時間で済みます。
面接官が見ているのはサーバー側の切り分けを続けられるか。
これは「「サイトが重い」と報告されました。何から調べますか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- データ取得を洗い出して時間を測り、独立したものを直列に待っていないかを見る
独立した取得を並行に走らせるだけで大きく縮むことがあります。 - すべての取得を並行に書き換える
前の結果を次の入力に使っている場合は並行にできません。依存関係を確認せずに書き換えると壊れます。 - 遅い部分を Suspense で切り出して先に他を見せる
体感は良くなりますが、処理そのものは速くなりません。まずは取得の中身を見るのが先です。 - そのデータが毎回必要かを見直し、キャッシュや静的化の余地を探す
取得回数を減らすのは根本対処になります。
面接官は何を見ているか
- データ取得の時間を測ろうとした
- 直列に待っていないかを疑えた
- キャッシュや静的化の適用余地を考えた
模範解答
そのページで走っているデータ取得を洗い出して、それぞれの時間を測ります。
よくあるのは、独立した取得を直列に await してしまっているケースです。2秒かかる取得を3つ順番に待てば6秒ですが、互いに依存していないなら並行に走らせて2秒強に縮められます。前の結果を次の入力に使っている場合だけは、直列にせざるを得ません。
次に、そのデータが本当に毎回必要かを考えます。更新が稀ならキャッシュできますし、全員に同じ内容ならビルド時に作っておけます。
それでも遅いなら、遅い部分を Suspense で切り出して先に他を見せる、という順序になります。ただしこれは体感を良くする手であって、処理そのものが速くなるわけではありません。