初期描画　クライアントレンダリングのが早いか、サーバーレンダリングのが早いか

背景

プロジェクトの仕様で、pcの画面実装はVue.jsで、spの画面実装はjspで行なっています。
先輩からjspはVue.jsより画面の初期描画が早いとこを教えてもらいました。
そこで疑問に思ったのが、なぜ同じコンテンツを表示するのにjspの方が早く描画できるのか？という点です。
調べていくと、レンダリングするタイミングによって初期描画の速さが変わってくることがわかりました。今回はそれらをまとめてみました。

レンダリングの種類

基本的なレンダリングには、

1. サーバーでレンダリングするサーバーサイドレンダリング
2. ブラウザでレンダリングするクライアントサイドレンダリング

と、二種類のレンダリングがあります。
私たちはこの二つレンダリングを使い分けて実装しています。

今回でいうと、
jspは、javaと、htmlで構成されています。javaはサーバーサイドのコードでレンダリングもサーバーで行われます。なので、１に値します。
Vue.jsはjavascriptとして読み込まれます。javascriptはクライアントサイドで実行されるファイルなので、２に値します。

以上を踏まえて、jsp（サーバーサイドレンダリング）のが早く描画される理由をそれぞれの仕組みを見て解決します。

サーバーサイドレンダリング

サーバーサイドレンダリングは、httpリクエストに合った提供したい情報をhtmlとして構築をしてからクライアントに返します。

レンダリングの流れ

1. クライアントからhttpリクエストを送る
2. サーバー上でhttpリクエストに合った情報や初期データを埋め込んだhtmlファイルを作成
3. サーバーからクライアントにhtml、javascript、cssファイル送信
4. クライアントでDOMが生成された状態のhtmlファイルが読み込まれる
5. javascript、cssコードが読み込まれる

２をjspファイルの動きで表すと、javaで書かれている部分をhttpリクエストの情報に適したものにし、さらにhtmlを作成することになります。

クライアントサイドレンダリング

クライアントサイドレンダリングは、javascriptを使用してブラウザ（クライアント）でページをレンダリングすることを意味します。

レンダリングの流れ

1. クライアントからhttpリクエスト送る
2. サーバーから空のhtml、javascript、cssファイルが送られてくる
3. クライアントで空のhtmlファイルが読み込まれる
4. css、javascriptコードが読み込まれ、DOMが生成される

２で、空のhtmlファイルが送られてくる理由は、htmlファイルはサーバー側で生成されることが理由です。
参考文献：https://developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Introduction

ざっくりとしたwebページの読み込みの順番は、htmlの解析→javascript実行→cssでスタイル当てるとなっています。参考文献：https://cidermitaina.hatenablog.com/entry/2019/03/03/232516

したがって、３の初期ロード時に、真っ白な画面が表示されることになります。
そのあとにクライアントサイドでjavascriptが読み込まれDOMが生成されていきます。

３、４の動きはユーザーからしたら、「あれ、なんか画面真っ白くない？」と感じてしまうでしょう。

結論、どっちが早く初期描画されるのか？

それぞれのレンダリングの流れを把握することができました。結局のところどちらが初期描画がはやいのでしょうか？
結論は、サーバーサイドレンダリングのが早いです。
サーバーから送られてくるhtmlの状態と、webページの読み込みの順番によって初期描画の速さが変わってくることが分かりました。

さいごに

今回は、サーバーサイドレンダリングと、クライアントサイドレンダリングの初期描画の早さに着目しました。
一つ言うと、サーバサードレンダリングのが早いからといって全てそれで実装すればよいわけではありません。それぞれメリットデメリットがあるので次の機会にまとめます。