クライアントサイドレンダリング vs. サーバーサイドレンダリング vs. プレレンダリング

##はじめに
最近フロントエンドのフレームワークについていろいろ調べることや周りの人から知見を聞くことが多くなってきました。その中でちょいちょい出てくるレンダリング技術に関するクライアントサイドやサーバーサイドなどのワードについて全くの知識が無かったので調べてみるとそれぞれの特徴などについて備忘録として記載したいと思います。

##フロントエンドの動向と考え方
近年フロントエンド技術に関するコミュニティが大いに盛り上がりを見せています。
その背景にあるのはNode.jsやブラウザ技術の著しい成長にともない、バックエンドのみならずクライアント含めて多種多様なフレームワークや技術が発明されてきました。その一例としてサーバーサイドレンダリング技術はReactやその他組み込みサーバーなどのハイドレーション機能によりますます勢いを増してきました。
ではクライアントサイドレンダリングやプレレンダリングも含めてどのレンダリング技術がどのようなものなのかそれぞれを概要を見ていきましょう。

##Client Side Rendering (CSR)
AngularやEmber.jsなどのフレームワークの登場により、フロントエンド技術者はクライアントサイドでレンダリングする傾向が生まれました。これはJavascriptがブラウザ側で解釈できるようになったことで実現できるようになり、SEO対策に関してもしっかりと対応ができました。
単一のHTMLファイルにリダイレクトすると、コンテンツをレンダリングする前に全てのJavascriptを取得しブラウザに全てをコンパイルさせるまで、サーバーとコンテンツなしで（またはロード画面を使用して）リクエストを配信できます。

##Server Side Rendering (SSR)
SSR技術は何年も前からおおくのところで利用されています。しかしクライアントサイドレンダリング技術の登場により忘れられつつありました。
###MVCアーキテクチャ (2000年代初頭)
2000年代初頭にSSRとしてPHPやJava PageなどのサーバーサイドでHTMLやデータ全てをコンパイルしクライアントにHTMLを配信していました。もちろんこれは高速で有効的でした。
しかしながら別ページに遷移するたびにサーバー側ですべての処理（ファイルの取得からコンパイル、HTML配信からCSS,JSの取得まで）をやり直す必要があり、ユーザー側は毎回数秒程度の待ちが発生しUXとしてはあまり良いものではありませんでした。
###Ajax (2000年代中旬)
JavaScriptで非同期にサーバからデータを取得し、それをもとにクライアントサイドでHTMLを部分的に動的編集するような技術に、Ajaxという名前が付いた。
Ajaxは「Asynchronous JavaScript + XML」の略で、XMLHttpRequest (略してXHR)というJavaScriptのAPIで 、サーバにHTTPリクエストを送り、そのレスポンスを非同期に処理する技術。

Modern SSR (2010年代)

React（Facebook社）は**RenderToString**という方法によってだれでも簡単にサーバーサイドレンダリングを利用できるように実現し、SSR技術はフロントエンド界隈でますます盛り上がりを見せていきました。
Next.jsや、Vue.jsのNuxt.jsなどのフレームワークにより実現が容易になったのも、普及の要因の１つです。

##Pre-Rendering
大まかにいうと事前にHTML,CSS,JSを構築（バンドル化）しておき、ユーザーからのリクエストが来たらそれを配信しましょうといった技術になります。
（今考えればSSRもプレレンダリングの一部かもしれません。逆もしかりか・・・）
定義は様々でこれといった断言はないようですが（私の中だけかも・・・）一般的に言われている代表的な2つを載せておきます。
どちらもクローラーの影響を考えたうえでのアーキテクトとなっており、規模感によっても向き不向きが分かれます。
###Static Side Generation (SSG)
Pre-Renderingの概要そのもので事前（Build時）にHTML,CSS,JSを構築（バンドル化）しておき、CDNなどのホスティングサービスを利用してユーザーリクエスト時にそれを配信する動きになります。
一番シンプルで且つ、スピードもSSRよりもあり安定した配信が可能です！！
ただ、ビルド時にデータ量が多かったりするとビルド時間が長くなったり、変化の激しいコンテンツなどは再度ビルドが必要なるため不向きなどといったとデメリットもあります。
###Incremental Static Regeneration (ISR)
最新のレンダリング技法で主にNext.js 9.5より広まりを見せてきています。
SSGと違って事前ビルドだけでなくユーザーリクエスト起因で更新/追加部分(ページ)だけを再ビルドを実行させます。
もちろん更新/追加がなければ前ユーザーがビルドしてくれた内容をそのまま配信し続けます。
このように変化にビルド時のデータ量問題や変化への対応といった部分でSSGよりも優れたアーキテクトへと進化した次世代のレンダリング方法と確立しました。

##まとめ
もともとReactしかフロントエンド技術を使っておらずクライアントサイドレンダリングが有効で一般的と思っていましたが、あらたなフレームワークを調べるうちにレンダリングもここまで進化しているのかということに驚かされました。
進化がとまらないフロント技術が数年後どうなっているかは誰も予測できないですが、今を知り必死に食らいついていくしかないのかなと感じました。

##参考/引用文献
・Client-side vs. Server-side vs. Pre-rendering for Web Apps
・Webアプリパターンの歴史 - SST、AJAX、CSR、SSR、SSG、そしてISR
・CSR,SSR,SSG,ISRのまとめ