JavaScriptからプログラミングに入り、Reactを使うようになってくると、サーバーサイドレンダリングの話によく出会うようになりましたが、仕組みの理解とそれがなぜ話題なのか、文脈が分かっていなかったせいか、どうも意味がすとんと来なかったので調べてみました。
1. そもそも、レンダリングとは
「レンダリング」という言葉はいろいろな意味で使われ、HTMLのレンダリングというと、二つの意味で使われるようです。
１．HTML生成：動的サイトで表示内容がユーザーインプットで変わるので、その度、必要なデータをとってきてHTMLを生成する。
２．HTML, CSS, JavaScriptなどをもとにDOMツリーに変換してメモリー上にロードして、最終的にコンテンツを描画する。
「サーバーサイドレンダリング」というときは１の意味。サーバー側でHTML生成が行われるということ。ここを調べるのに一番時間がかかりました。
2. JavaScriptを使った場合、レンダリングはどうなっているのか。
JavaScriptを使ったアプリケーションで、ユーザーがブラウザにURLを入力して、コンテンツがブラウザに表示されるまでの流れは、、、
- ユーザーがブラウザーにURLを入力。
- URLをもとに適切なサーバーにリクエストが送られる。
- サーバー上に置かれたHTML, CSS, JavaScriptがブラウザーに送られる。
- HTML, CSS, JavaScriptをもとにブラウザー上にコンテンツが表示される。
Reactを使っていても、JavaScript（jsx）ファイルすべてがブラウザに送られていて、これは、ディベロッパーコンソールでSourceを開くとコードが全部見られるのからも明らか。全部ブラウザー側に来ている。
そして、JavaScriptを使ったアプリでは、クライアント側に送られたJavaScriptがHTMLを操作する。とはいえ、素のJSでやろうとすると大変だったのが、仮想DOMとモダンなフレームワークによって実用的になり、結果、Reactなどで「JSON等でデータだけ受け取り、クライアント側のJavaScriptで差分描画させる」ようになった。こちらの記事がとても参考に。
JavaScriptしか使っていないと、こんな風にHTMLの操作はクライアント側でするというのが当たり前と思っていましたが違いました。たとえば、、、
２．RubyやJavaなどの場合。
ブラウザの動きを見ると、図の左にあるブラウザからサーバへリクエストが出て、それがサーバへ到達すると、その裏にデータベースなどがあって、データベースから値をとってきたらコンポーネントやテンプレートエンジンなどを使ってHTMLにしてブラウザへ返す、という動きをしていると思います。
これが「普通」のHTMLのレンダリング、なんですね。
こちらの記事もJavaの場合とJavaScriptの場合を比較してわかりやすいです。↓
３．サーバーサイドレンダリングが話題になっている文脈。
以上から、動的サイトのためのHTML生成は、他の言語ではサーバー側で行われていたのが、JavaScriptではクライアント側で行われていた。
そして、ここにきて、JavaScriptを使ったアプリケーションでも、SEO対策、First Viewの改善という二つの目的のため、サーバーサイドレンダリングが話題になっている。このくだりについては上記の「Server Side Renderingについて知るべきこと」の記事や、以下の記事に詳しく出ています。
「昔みたいに、サーバー側でHTMLを組み立てて返す方法に戻せってことか・・？と、思うとそうではなくて。
ここでいうサーバーサイドレンダリング（SSR）というのは、クライアントサイドレンダリングでやっているアルゴリズムをサーバーサイドでやる感じみたいです。」
沢山のサイトのおかげで、文脈が分かり、なぜサーバーサイドレンダリングが話題になっているのかしっくりきたし、調べる途中でレンダリングには二つの意味があるのもわかって、疑問がとけました。
その他参考にしたサイト：