== 沿革

本格的にワールドワイドウェブ（www）が普及したのは1995年頃だった。
当時は静的なHTML（HyperText Markup Language）ページが主流だった。
HTMLは情報を構造化し、文書の意味や見出し、段落、リストなどを表現していた。
ページのデザインやスタイルは限定的だったが、これがWebの基盤となり、今日の進化したウェブページの基礎となった。

ユーザはインターネットブラウザを介してWebサーバと通信し、HTMLを取得している。
さらに、CSSやJavaScriptなどがページデザインを制御することにより、インタラクティブな体験を得られている。

=== MPA

ブラウザはWebサーバへHTTPリクエストを送信する。
Webサーバ内でHTMLページを構築し、JavaScriptやCSSとともににHTTPレスポンスを返却する。
この処理をリクエストのたびに繰り返すため、ページ遷移の度に読み込みが発生する。
この仕組みをMultiple Page Application(MPA)という。
MPAはページ遷移の速度に問題を抱えていた。

=== SPA

MPAのデメリットを解消する仕組みがSingle Page Application(SPA)である。
MPAは、SPAのように毎回フルのHTMLページを返却するのではなく、差分のみを更新する。
Ajax#footnote[Webページを表示した状態のまま、新しいページの読込などを伴わずにWebサーバ側と通信し、非同期的に表示内容を変更する技術。]を使用し、差分情報のリクエストを送信し、サーバサイドは差分箇所を示すJsonを返却する。
差分のみの更新はMPAと比べ高速であり、ページ遷移が快適になる。
しかし、初回アクセス時に全ページの描写に必要なJavaScriptを取得するため、ローディングコストが発生し、読み込みが重くなる。
代表的なライブラリに`React`がある。

=== SSG

Static Site Generation(SSG)は、ビルド時に静的なHTMLファイルを生成する。
アプリをビルドするたびに、全てのページが作成される。
ユーザーがWebサイトにアクセスするとこれらのファイルをロードされ、サーバーは余計な作業をする必要がなくなる。
ホームページやブログなどの更新頻度が少ない静的コンテンツに適切なアプローチである。
代表的なフレームワークに`Next.js`がある。

=== SSR

SSR(Server Side Rendering)とは、初期表示速度の問題を解決するために、サーバーサイドでページの内容をレンダリングするアプローチである。
ユーザーは最初のページロードで完全なページコンテンツを受け取る。
一度ページを読み込むと、その後のデータの取得や更新は最小限のリソースで行えるため、ネットワークトラフィックやサーバーロードを軽減できる。
SSRページはリクエストごとにサーバー上で生成されるため、常に最新のデータを表示する。
通販サイトやSNSプラットフォームのような、パーソナライズされた（動的）コンテンツを持つアプリケーションに適切である。
代表的なフレームワークに`Remix`がある。

