SSR(Server Side Rendering)におけるレンダリングとは
SPA（Single Page Appliation)のアーキテクチャが飲み込みずらくて、あれこれ調べたところ、Client Side Rendering（SPA）・SSR・SSG を整理してみた - 7839と言う記事を発見しました。
この記事は大変わかりやすい図で整理してくれていて、SPAでのサーバとブラウザの動作、それらの間で流れるデータなどを飲み込むことが（一応）できました。
この記事では、SPAの他に、SSR(Server Side Rendering）とSSG（Serve Side Generator）というアーキテクチャについても紹介しています。
ここで引っ掛かったのが、SSRにおけるRenderingという言葉です。元記事中、SPAについても「CSR(Client Side Rendering)とほぼ同意語」と書いていて、ここにもRenderingが出てきます。
では、ここで言うRenderingとは何か？
私の知るRendering
私がRendering / レンダリングという言葉を知ったのはCGの用語としてで、その意味は、「（オブジェクトや影、質感などの）計算モデルから演算を行い、画像イメージ（ビットマップ）を生成すること」だと理解してきました。
で、CPUやGPUがVRAMなどに一生懸命レンダリング＝書き込んだ＝描画したビットマップ・データをデバイスに転送すると表示されるのが、目に見える画面だ、と。
レンダリング（rendering）は、データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。
とありますし、コトバンクのレンダリングとは - コトバンクでも、
情報やデジタルデータを、コンピュータプログラムの演算によって可視化、つまりディスプレーに表示させることにより、その内容を把握できるようにすること。
となっていますので、私の理解もあながち間違いではないように思います。（ちなみに、音声データを扱うDTMでもレンダリングという言葉を使うということは、今回調べて初めて知りました）
Webアプリケーションの世界のRendering
では、SSRで言うRenderingはどういう処理で、この場合、サーバからクライアント（つまりブラウザ）に送られるものはいったい何なのでしょうか？
ネットワーク帯域の制限やデバイス独立というWebとHTMLの思想から言って、VRAMからディスプレイ・デバイスに転送されるようなビットマップデータのはずがない、と思ったのですが、それでは、何をrenderingして転送することなのか、ちょっと混乱しました。
普通に考えるとブラウザはHTMLをインプットとして処理するものなので、「サーバ側でHTMLを生成してブラウザに送ること」だろうと思ったのですが、SSRについての解説を調べて見ても、この点についてシンプルに言い切っているものになかなか行き当たりません。
例えば、Nuxt.jsの解説などでも、
サーバーサイドレンダリング
サーバーサイドレンダリング（SSR）はウェブページのレンダリングをブラウザの代わりにサーバー上で行う、画面の表示において有用なアプリケーションの機能です。サーバーサイドは完全にレンダリングされたページをクライアントに送信します。クライアントの JavaScript バンドルが引継ぎ Vue.js のアプリがハイドレーションできるようにします。
とあります。
「完全にレンダリングされたページ」とは？
＊まさか＊ブラウザが表示する画面イメージそのものではないはずですが……
ブラウザの動きを見ると、図の左にあるブラウザからサーバへリクエストが出て、それがサーバへ到達すると、その裏にデータベースなどがあって、データベースから値をとってきたらコンポーネントやテンプレートエンジンなどを使ってHTMLにしてブラウザへ返す、という動きをしていると思います。
Ruby on RailsやJavaServer Pagesなどで作ったアプリケーションもこんな動きになると思います。これは普通のHTMLのレンダリングですよね。
という文と、そこに添えられた図の中で、サーバからブラウザに送られるデータに添えられた「Render HTML」という言葉で、自分の理解で間違っていなかったと納得しました。
要するに、Webアプリケーション業界では、「DOMからHTMLに変換が終了した"raw"HTMLを生成すること」をレンダリングと呼んでいるわけなんだろうと思います。
ようするに言葉の定義の問題で、知ってしまえばそういうこと、という類の話ですが、どうもスッキリいかずにストレスが溜まってしまったので、思わずブログ記事にしてしまいました。
