SSRとは何かメリデメとフローを学んだまとめ(SPAと比較)

SSR(サーバーサイドレンダリング)とは

元々ブラウザ上でしか動かなかったJavaScriptをサーバー内部で実行して、HTMLを生成することを指します。
もう少し言うと、リクエストがあった時にJavaScriptをダウンロードしてクライアントでレンダリングするのではなく、初回のリクエストはサーバー側でレンダリングして返すと言うこと。

SSRはなぜ必要とされているのか

SSRが必要とされる一番の理由はSEO対策だと思っています。
ReactやVueなどのSPAサイトを構築するとGoogleクローラーがJavaScriptを解釈しない可能性があり評価してくれないことが考えられます。
その対策としてJavaScriptをサーバー側で実行してHTMLを生成して返してくれるSSRが必要とされている。（この辺りはメリットで話します）
しかしGoogleクローラーも進化を遂げて現在ではSPAサイトでも認識され評価してくれています。
ただこの懸念はGoogleを信じるしかないので、リプレイス等でSPAに変える際絶対にSEOに影響がないという保証はどこにもないのでSSRが必要なのではないでしょうか。

SSRのメリットは何か

初回レンダリングが早い

SSRではサーバー側のNode.jsでJavaScriptを実行してた結果HTMLを生成してクライアントに返してくれるため早い。
Webアプリにバンドルされる機能の大半は初期表示に必要がないため、初期表示をしてから読み込めばよい
SPAなどはリクエストしてレスポンスを受けてからJSをブラウザで実行するため待ち時間が発生する。

SEOに強い

SSRはサーバーでJavaScriptを実行しHTMLを生成してクラアント側に返すため正しく評価されると言えます。
一方SPAの課題として２つのSEO問題がSSRはそれらを解決できます。

・非同期コンテンツを待ってくれない
　Googleは同期的JavaScriptアプリケーションのインデックスを作成するためAjax等でコンテンツを取得する場合にクローラーが待ってくれない可能性があると言われている。そのためSEOが重要なページは非同期コンテンツを取得する場合SSRが必要。

・レンダリングエンジンが古い場合HTMLを認識してくれない
　クローラーがJavaScriptを解釈しない場合何もない状態を受け取ります。
　レンダリングエンジンが古いと正しく動かず正しいHTMLを認識してくれないということはありえますが、Googleから最新のChromeに常に対応していくことが発表されているのであまり問題にはならないと思う。

SSRのデメリットは何か

サーバー側の負荷が高い

サーバー側でレンダリングするということはサーバーのCPU負荷が増えるということ。
トラフィックが多いことが見込まれる場合はキャッシュ対応をしっかりと行う必要がある

Node.jsを実行できる環境が必要になる

SPAとは異なりJavaScriptを実行するためNode.jsが実行できる環境を準備しないといけない。

SPAとSSRの流れ

SPA

SPAが生まれた理由

SPAがそもそも生まれた理由はページ遷移のたびにリクエストをすると動的処理が行われるからサーバーの負荷が高くなって遅いんじゃないか？だったらページ遷移ごとのリクエストやめちゃおうぜって言うことです。

SPAの流れ

ページ遷移やコンテンツの切り替えはサーバーで行なっていたものをブラウザ側の仕事にすることでサイトの高速化を図りました。
そのためSPAはWebサーバーへのリクエストは1度きりです。
そしてページ固有のコンテンツだけを変更させます。
例えばフッターとヘッダーはどのページも共通だった場合、それ以外のコンテンツだけを変更させます。
Reactのような仮装DOMの場合、変更のあった差分だけをDOMに反映させるためページの変更ごとに全てのDOMを作り直す必要がありません。

ただしSPAは最初の表示が遅いです。
一番最初の表示は必要のないrouterやstoreなどのjsも含まれて送られるためJavaScriptのダウンロードと実行に時間がかかります。
またOGPの設定もできません。
先ほどお話ししたようにページのコンテンツをDOM操作で変更しているだけなのでページごとのOGP設定ができないです。
JavaScriptでタグを変更してもいいですが動的な変更が読み取れない場合もあるためそうゆう場合はSSRを使う方がいいでしょう。

SSR

SSRが生まれた理由

SSRが生まれた理由は冒頭でお話しした理由です。
もう１つの理由があるとするならばSPAの初期表示が遅い部分を補うことです。

SSRの流れ

SSRの流れはほとんどSPAと変わらず差分だけを非同期リクエストします。
大きな違いは、レスポンスでレンダリング済みのHTMLを渡します。レンダリングまでブラウザが行なっていましたがSSRではレンダリングまではサーバーで行いpaintingはブラウザで行うと言う点です。
レンダリング済みのHTMLとはJavaScriptで変更したDOM操作なども反映されたファイルです。
そのためSPAでできないOGP設定もサーバー側でHTMLを作成する静的ページなのでできます。

デメリットは紹介しているので割愛します。

最後に

今回学んだことをまとめ見ました。
SSRとSPAってなんだ？となっていましたが明確に必要な理由やメリット・デメリットが理解できました。
色々と勘違いしている部分もあり情報不足だったなと実感しています・・・
今後はSSGについても学んでいきたいなと思います。