サーバーでレンダリングする意味は何ですか。全部クライアントで描画するのと比べて。
初期表示、クローラ、そしてデータの近さの3点です。クライアントだけで描画するとJSを実行し終えるまで画面が空になり、HTMLに内容が入らないため読み取られにくくなります。
面接官が見ているのはSSR の目的を自分の言葉で言えるか。
これは「'use client' のコンポーネント本体に window を直接書いても、サーバーでは実行されないので安全ですか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- 初期表示が速くなり、クローラにも内容が見え、送るJSも減らせる
3点とも押さえられています。 - サーバーの負荷を下げられる
逆です。サーバーで描画する分、サーバーの仕事は増えます。減るのはクライアント側の仕事です。 - JavaScript を書かずに済むようになる
書きます。実行場所が変わるだけです。 - 検索エンジンに内容が伝わりやすくなる
正しいのですが、それだけだと弱いです。初期表示の速さと、送るJSを減らせる点まで挙げられると説明として完成します。
面接官は何を見ているか
- 初期表示が早くなる点を挙げた
- 検索エンジンやSNSのクローラに内容が見える点に触れた
- JS の量を減らせる点を挙げた
模範解答
3つあります。
1つ目は初期表示です。クライアントだけで描画すると、JSを落として実行し終えるまで画面が空になります。サーバーで HTML を作っておけば、その待ち時間の間に内容が見えます。
2つ目はクローラです。HTML に内容が入っているので、検索エンジンやSNSのプレビューがJS を実行しなくても中身を読めます。
3つ目は送るコードの量です。Server Component のコードはブラウザに送られないので、重いライブラリをサーバー側に閉じ込められます。