あるページだけビルド時に生成されず、毎リクエスト実行されていました。原因として何を疑いますか。
cookies()、headers()、searchParams のような、リクエストが来るまで値が決まらないものに触れていないかを見ます。触った時点でビルド時に答えを作れなくなります。
面接官が見ているのは動的レンダリングへ倒れる条件を知っているか。
よくある答えと、面談でどう見られるか
- cookies / headers / searchParams をどこかで読んでいないかを探す
正解です。自分では呼んでいなくても、import した関数の中で読んでいることがあります。 - そのページに動的ルートが含まれているから
動的ルートでも、値の一覧を事前に与えれば静的に生成できます。「角括弧があるから動的」ではありません。 - fetch がキャッシュされていないから
関係はしますが、直接の原因としては弱いです。リクエスト時にしか分からない情報に触れているかどうかが、より効きます。 - Client Component を含んでいるから
Client Component を含んでいても静的に生成できます。プリレンダーされて HTML になり、後からハイドレーションされます。
面接官は何を見ているか
- cookies / headers / searchParams の使用を疑った
- リクエスト時にしか分からない情報だから、と理由を言えた
- どこで使われているかを探す、という動きができた
模範解答
リクエスト時にしか分からない情報に触れていないかを見ます。具体的には cookies()、headers()、searchParams です。
これらはリクエストが来るまで値が決まらないので、触った時点でビルド時に答えを作れなくなります。公式の表現では、これらを読むとルート全体が動的レンダリングに倒れます。
探し方としては、まず page から辿って直接呼んでいないかを見ます。無ければ、共通レイアウトや、認証まわりの共通関数など、間接的に呼んでいる場所を疑います。自分では呼んでいなくても、import した関数の中で cookies() を読んでいれば同じことになります。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。
観点をすべて押さえられた場合
ページの隅にログインユーザー名を出したいだけです。そのために全体を動的にするのは避けたい。どうしますか。一部しか触れられなかった場合
静的レンダリングと動的レンダリングは、それぞれ何が起きていますか。触れられなかった場合
静的レンダリングと動的レンダリングは、それぞれ何が起きていますか。