SSRで初回表示が高速な理由

Question

サーバーサイドレンダリング（SSR）のメリットとして初回表示が高速なことが複数サイトで挙げられていますが、なぜ高速になるのかが分かりません。
ユーザーがURLにアクセスしたときにサーバー側でレンダリングを開始するのとクライアント側でレンダリングを開始するのでは（サーバーとクライアントが同等の描画能力を持っている場合）表示速度に差がないか、むしろサーバーとの通信分SSRの方が時間がかかるように見えます。
あまりにも基本的過ぎるのかそのあたりのことがどのサイトにも書かれていませんでした。ご教授いただけると助かります。

Answer 1

ご指摘のように、クライアントサイドレンダリング（CSR）に比べてSSRが必ず速くなるというものではないと思います。「SSRはCSRに比べて高速化のための手段が多い」というのが正確なところかと思います。

ちょっと古い記事になりますが、SSRを使った高速化の内容と、どこが高速になるかが以下の記事に書かれています。

Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 － Publickey

この記事では、ページを開いて初期の画面表示がされるがまだJavaScript等は完全にロードさせておらず操作はできない状態（First Meaningful Piaint）までの時間が早いとされてます。SPA(CSR)だとJavaScriptが完全にロードされるまではまったく表示がされないですし、SPAだとサイト全体のHTMLがJavaScriptの形で初回にロードされるので、JavaScriptのロードは結構重たい処理です。すなわち、初回の表示に時間が掛かるわけですが、SSRでそれを解決しようということですね。

しかし、SSRであっても、レンダリングのためにやるべき処理は変わらないじゃないか、という疑問だと思います。
確かにそうなのですが、

• 高性能なサーバーを用意することで高速化する
• ウェブサーバーとAPIサーバーの間の通信が高速なので遅延を減らせる
• JavaScriptを分割することによるロード時間の短縮
• レンダリング結果のキャッシュ
• 最初に見える範囲だけServer Side Renderingをして、スクロールしないと見えないところはClient Side Renderingする

などで高速化を果たしています。
ということで、SSRにしただけで初回表示が高速になるわけではなく、SSRを採用した上でソフト的、ハード的なリソースを投入して高速化していることになります。ユーザーの端末の性能はサイト運営者側ではどうしようもありませんが、サイト側のハードウェアは投資次第で改善できるので、資力に余裕がある場合はSSRが有望ということですね。
一方、チューニングにリソースを割けないとか、サーバーの性能に限界がある等の場合はSPA(CSR)でよいのではないかと思います。

Answer 2

（サーバーとクライアントが同等の描画能力を持っている場合）

スマートフォンなどの場合、この前提は成り立ちません。

Comments

[maisumakun]

あと、ブラウザ内で描画する場合、JavaScriptコードもダウンロードする必要がありますが、SSRの場合はJavaScriptも同じサーバにあるのでその転送時間も不要です。