vueやnuxtを触り始めたものはいいものの、サーバサイドレンダリングの良さと言うか概念が
ほんのりとしかわからなかったので、他の用語とかも含めて調べてまとめてみる
基本用語の確認
レンダリング
HTMLとCSSを解析してコンテンツを画面に表示すること。
DOM (Document Object Model)
HTMLなどのドキュメントの構造をメモリ内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するもの(プログラミングインターフェース、API的なもの)。
DOMはドキュメントをオブジェクト(マークアップによって区切られたまとまり)の木構造モデルで表現することで、
ドキュメントを各種プログラミング言語から操作・利用できるようにする1。
(ドキュメントの種類や操作をするプログラミング言語には依存しない)
このプログラムから操作・利用されるオブジェクトは総称してNodeと呼ばれる2
各ブラウザは標準仕様にもとづいてDOMを独自実装している。
ブラウザ内のレンダリングエンジンはDOM(およびCSSOM)に基づいてレンダリングを実行する。
詳しくは以下参照 (あとで読む)。
仮想DOM
DOMと1対1に対応にある単純なJavaScriptのオブジェクト(木構造)とそれを用いたdiff・patchアルゴリズム、
あるいはその実装のこと3。
-
diff (差分検知)
仮想DOMのノードが変更あった場合、変更前後の仮想DOMを比較して変更箇所を特定する。 -
patch
仮想DOMで変更があった箇所だけDOMに反映する
断続的にDOMを変更するのではなく、特定のタイミングでバッチ処理的に反映を行うらしい。
詳しくはここ (あとで読む)
DOMの直接の操作と比べた場合のメリット
DOMの直接の操作の場合はどの要素を参照してどの要素を変更するのかをJS側で把握する必要があったが、
仮想DOMを使うことでその必要がなくなるので、
- UIとロジックを分離できる
- 複雑なロジックの実装がしやすくなる
- 設計やテストがしやすくなる
- viewのコンポーネント化
クライアントサイドレンダリング
JavaScriptを使用したDOM操作することで部分的に画面変更を適用することで、直接ブラウザでページをレンダリングすること。
データ取得やテンプレーティング、ルーティングはサーバ上ではなくクライアント上で行われる。
サーバとはデータ(json)のみを通信し、そのデータに基づいてコンテンツ内容の変更やページ更新を行う。
従来のレンダリング方法(静的/動的コンテンツ)と比べた場合のメリット
従来の画面の変更に伴って1つのhtmlを再構築するレンダリング方法と比べて、
- 画面全体をレンダリングし直す必要がないため、ページの操作性を向上できる
- 部分的なレンダリングを行うことで、高度なUIを実現できる。
SPAのような快適な操作性が求められるページの実装に向いている。
サーバサイドレンダリング
狭義の意味
クライアントサイドおよびサーバサイドの両方のHTMLレンダリングの仕組みを、
共通のロジックを用いて動作させること4。
サーバサイドJS実行環境と仮想DOMに基づいたフレームワークの利用して、サーバサイドで仮想DOMの差分検知とその通知を行って、クライアントサイドで部分的なDOM操作を行うこでHTMLレンダリングを行うこと。
アイソモーフィックJavaScriptとユニバーサルJavaScriptとはほぼ同じ意味。
クライアントサイドレンダリングと比べた場合のメリット
-
SEO対策
サーバサイドでレンダリングすることで、クローラが完全に描画されたページを直接参照ができる -
パフォーマンスの改善
クライアントサイドはJavaScirptのダウンロードを待たなくてよくなり初期の画面レンダリング時間が短縮できる(詳細)
デメリット
- Node.jsなどのサーバサイドJavaScript実行環境が必要になる
- サーバサイドでレンダリングするのでサーバのCPU負荷が増える
アイソモーフィックJavaScript
クライアントサイドとサーバーサイドで同じコードを実行できるようにするためのフレームワークの総称。
クライアント-サーバー間でJavaScriptコードの共通化(主にバリデーションなどのロジック部分)を行う5。
つまりまとめると、SPA + SSR を両立するために、クライアントとサーバで同じコードが実行できると良くて、それが Isomorphic JavaScript 6
ユニバーサルJavaScript
アイソモーフィックJavaScriptにおけるJavaScriptコードの共通化の概念について、
クライアントやサーバに限らず、モバイルや組み込みデバイスといった環境でも実行できる、
あるいは、そういった環境に左右されないといった意味でUniversalという呼び方で表現しようといったもの。
まとめ
サーバサイドレンダリング含めて、今時のweb開発における技術要素についてはっきりとさせられた。
そして、一番重要な概念は仮想DOMなのもわかったからよかった。
あと、調べて思ったけど、vueとかnuxtについて学ぶ中でサーバサイドレンダリングって一言に言われても、
色々と要素技術を含んでるわけだから、分けわかんなくなるよなと思う。
参考資料
- ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点 - Sundaycrafts - Medium
- 仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう - エンジニアHub｜若手Webエンジニアのキャリアを考える！
- Webフロントエンドとサーバーサイドの技術動向をざっくり整理する／JavaScript - "BOKU"のITな日常
- Ruby on Rails - サーバーサイドレンダリングとは？｜teratail
- はじめに — Vue.js