SSRに関する疑問点

Question

SSRの仕組みについて理解できない部分があり、下記の疑問に回答いただけないでしょうか。

1.CSRと比べたメリットに初回描画が速くなる、という記述を見かけますが、なぜ速くなるのでしょうか？ クライアント側でJSのバンドルファイル自体はダウンロードして実行されると思うのですが、クライアント側ではどこの処理が省略されるのでしょうか？

2.サーバーサイドレンダリングの部分はCloud FunctionsなどのFaaS上でnuxtやnextを実行する方法が一般的でしょうか？それとももっと一般的な方法があるでしょうか？

3.FaaS上でnuxtやnextを実行させると起動に時間が掛かってコールドスタートになりそうですが認識は合ってますでしょうか？

Answer 1

ちょっと自信がないですけど回答してみます。。。

1. CSRと比べたメリットに初回描画が速くなる、という記述を見かけますが、なぜ速くなるのでしょうか？

CSRの場合、クライアント側でJavaScriptでHTMLを更新してから画面をレンダリングするので、絶対にJavaScriptがロードされてからじゃないと画面の初期表示はできないですが、SSRの場合は、既にサーバ側でHTMLを生成してしまっているのでHTMLが読み込まれた時点ですぐにレンダリングができます。この違いがSSRが初回描画に速くなるという理由だと思います。

ただし、SSRはサーバ側でHTMLを生成する（＝サーバ側で処理が発生する）ため、アクアセスが集中してサーバが重くなると、CSRよりもLCPが低下することもあるかもしれません。

2. サーバーサイドレンダリングの部分はCloud FunctionsなどのFaaS上でnuxtやnextを実行する方法が一般的でしょうか？それとももっと一般的な方法があるでしょうか？

システムの要件によるので、何が一般的かと言われると何とも言えないと思います；；

ただ、3の話にも関わってくる話ですが、FaaSはコールドスタートになる可能性が高いので、プロダクトのようなパフォーマンスを気にするシステムでは採用されにくいと思います。

一方で、アクセス数やパフォーマンスをあまり気にしない個人開発であればランニングコストを抑えられるとか、試しに使ってみたいといった理由でFaaSが採用されることもあると思います。

3.FaaS上でnuxtやnextを実行させると起動に時間が掛かってコールドスタートになりそうですが認識は合ってますでしょうか？

これはその認識であっていると思います。

Comments

[redara]

ありがとうございます。イメージをつかむことができました。クライアント側の端末が非力な場合は特に、SSRが表示速度速そうですね。