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

2 min read読了の目安(約2000字

背景

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

レンダリングの種類

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

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

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

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

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

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

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

レンダリングの流れ

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

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

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

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

レンダリングの流れ

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

2で、空の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

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

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

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

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

さいごに

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