SPA、SSR、TTV、TTIを知っていますか？
開発者なら知っておくべきウェブフロントの基本概念についてまとめてみました。
個人的には開発者だけでなくディレクターやPMも以下の内容に出てくる単語を使用するので、概念を把握するのにお役に立てれば幸いです。
１. SPA（Single Page Application）が出るまで
１）1990年中半まで
ほとんどのサイトは静的ページに構成されたサイトでした。
静的ページとは？
サーバーに出来上がったHTMLページが乗っておりユーザーがサイトにアクセスするとサーバーに乗っているHTMLページをそのままロードしてみせます。
問題点はリンクをタップすると当該のページをサーバからロードしてページ全体がアップデートされるので効率性が悪です。
２）1996年
iFrameタグ導入！
HTMLページ内にもう一つのHTMLページを取り込むことができ、部分的にページを呼び込むことができるようになりました。
３）1998年
XMLHttpRequestが導入（fetch APIの源流）
HTMLページ全体をロードしないでJSONフォーマットで必要なデータをサーバーからロードして、JavaScriptを利用し同的にHTML要素を生成して部分的にページをアップデートします。
４）2005年
XMLHttpRequestが AJAXという名前になりました。
AJAXを利用してGoogleは Gmail, Google Mapsなどを作ることになり、
これが現在のSPA（Single Page Application）です。
SPAとは？
単一のWebページでコンテンツ切り替えを行うことで、ページ遷移の必要がなく、ブラウザの挙動に縛られないWeb表現を可能にするのです。
2. CSR（Clinet Server Rendering）
SPAトレンドにユーザーのPC性能が良くなり、多くの処理を無理なく処理できるようになりました。
JavaScriptも標準化されるにつれて、強いコミュニティを土台としてAngular、React、Vueのようなフレームワークが生まれ、CSRトレンドに転換されます。
ではCSRとは?
簡単に説明するとクライアント側（ユーザーのブラウザ）で全てレンダリングする方法です。
※ TTVとTTIが同時に起きる。（TTVとTTIは一番下の用語説明を参考）
CSRのレンダリングは以下となります。
- サーバからindex.html（ほぼ空のHTML）を受け取る
- App.jsをサーバーにリクエストする
- 基本的にレンダリングするために必要なApp.jsやCSSを受け取る
- ブラウザがjsとCSSを読み込む
- 読み込んだ内容を元にして同的にHTMLやCSSを生成し展開する
- 最終的にユーザーにページが表示
デメリットは？
- ユーザーが初回画面を見るたびに結構な時間がかかる
- SEO（Search Engine Optimization）に向いてない
（参考画像：https://huckabuy.com/2020/11/23/client-side-vs-server-side-vs-dynamic-rendering/）
３. SSR（Server Side Rendering）
こんなCSRのデメリットがSSRが誕生しました。
SSRとは?
簡単に説明するとCSRと反対でサーバー側で全てレンダリングする方法です。
サーバーが動的にHTMLを生成してクライアントに返します。
それでクライアンは返されたHTMLがユーザーに表示されます。
※TTVは早いけど、TTIが遅い（TTVとTTIは一番下の用語説明を参考）
メリットは？
- CSRを利用するときより、初回ページロードが早い
- 全てのコンテンツが入っており、効率的なSEO対応が可能
デメリットは？
サーバーから全体的なウェブサイトをまたロードするので、
- 瞬きの問題
- サーバーに負担が高い
（参考画像：https://huckabuy.com/2020/11/23/client-side-vs-server-side-vs-dynamic-rendering/）
４. 結論
どちらが良いかと言ったら絶対的な判断は出来ません。
作ろうとするサービスのTTVとTTIを考慮して採用することをおすすめします。
用語説明
・TTV（Time to View ）：ユーザーがWebサイトを見るときにロードする時間
・TTI（Time to Interact）：リンクのクリックなどのインタラクトができるまでの時間
Follow me!
