はじめに
ウェブ開発は、よりインタラクティブでレスポンシブなUXを実現するために進化し続けている。サーバーサイドレンダリング（SSR）から始まり、Ajax、シングルページアプリケーション（SPA）、仮想DOMという進化の過程を記載。
サーバーサイドレンダリング（SSR）：〜2000年
初期のウェブ開発では、すべてのコンテンツがサーバー側で生成され、クライアント（ブラウザ）に送信されていた（=SSR）。
ユーザーがリンクをクリックすると、新しいページのリクエストがサーバーに送られ、サーバーは新しいHTMLページを生成してクライアントに送り返す。
静的なHTMLファイルが表示されるので、データの変更などが合ってもリロードをしなければ反映されない。
利点: 完全にレンダリングされたページがユーザーに速やかに提供されるため、初期表示の速度が早い。
欠点: ユーザーが異なるページに移動するたびに、サーバーから全てのHTMLを再度ロードしなければならないため、ページの遷移が遅くなる可能性がある。画面全体が一瞬真っ白になり、その間はユーザーは操作できない。
Ajaxの出現→SPAが普及：2000~2010年頃
Ajax（Asynchronous JavaScript and XML：非同期JavaScriptとXML）は、2000年代初頭に登場した。AjaxはJavaScriptを使用して非同期にサーバーと通信を行い、ウェブページの一部を動的に更新する技術。これにより、ユーザーはよりスムーズでインタラクティブなウェブ体験を得ることができるようになった。
Google Mapsは、この技術を広く知らしめた一例。地図の表示部分を移動するたびに、画面全体が真っ白になる（SSR）ことがない。
利点: ページの一部のみを更新できる（ページの再読み込みがない）。１つの処理が終わるまで待つ必要はなく、他の操作をする事が出来る。
欠点: 複雑なAjaxアプリケーションは管理が難しくなる可能性がある。
Ajaxの仕組み：XMLHttpRequest / JavaScript / DOM
Ajaxでは、XMLHttpRequest、JavaScript、XML、JSON、DOMなどの技術や概念が合わさっている。
ただし、XMLHttpRequestオブジェクトは、その名が示すように当初はXMLデータの取得を主な目的としていたが、任意の種類のデータを扱うことができ、必ずしもXML形式である必要はない。また、サーバーからのレスポンスの形式でXML以外の形式（JSONなど）も渡せるので、こちらでもXMLである必要はない。
当初、Ajaxは主にXML形式のデータの受信・送信に使用されていたが、現在ではJSONがより広く採用されている。XMLは依然としてオプションとして利用可能だが、Ajax通信で必須ではない。つまり、Ajax（Asynchronous JavaScript and XML）は、その名前にもかかわらず、XMLに限定されないので、現時点ではXMLという表現はミスマッチかもしれない。
1. イベントのトリガー
ユーザーがウェブページ上でアクション（例えば、ボタンクリック）を行うと、そのイベントがトリガーとなる。
2. サーバーへの非同期リクエスト
イベント発生後、JavaScriptを使用してXMLHttpRequestオブジェクトを作成する。このオブジェクトを使って、サーバーに対して非同期でリクエストを送信する。リクエストには、ユーザーが必要とする情報や期待するレスポンスの形式（JSON、XMLなど）が指定される。
3. サーバーでのリクエスト処理
サーバーはリクエストを受け取り、必要な処理を行う。この間、クライアントサイドでは他の操作が可能で、ユーザーは待機することなくページと対話を続けられる。
4. レスポンスの送信
サーバーでの処理が完了すると、結果はJSONやXMLなどの形式でクライアントに送信される（レスポンス）。
サーバーへの通信がXMLHttpRequestオブジェクトを使用してるので、XMLしかデータを受け取れないように思えるが、XML以外にもデータを受け取る事ができる（JSONなど）。
ちなみに、XMLはExtensible Markup Languageの略でマークアップ言語。HTMLと似ているが、HTMLと異なり、タグの名前を自由に設定できるので、複数の処理をやり取りする際の管理に最適。
5. DOMの更新
クライアントサイドのJavaScriptは、受信したレスポンスを使ってDOM（Document Object Model）を更新する。このステップでは、ページの一部だけが新しいデータで書き換えられる。このため、ページ全体をリロードする必要がなく、ユーザーにとっては滑らかでシームレスな体験が提供される。
DOMは、HTMLやXMLをオブジェクトの木構造モデルで表現することで、ドキュメントをプログラム（JavaScriptなど）から操作・利用することを可能にする仕組み。
下記コードでは、ユーザーが「データをロード」ボタンをクリックすると、script.jsがdata.txtからデータを非同期にロードし、そのデータをdataContainerというIDを持つdivタグ内に挿入する。
このプロセスはページ全体の再読み込みを行わずに実行されるため、ユーザーはページの他の部分を使用し続けることができる。また、更新が必要なのはdataContainer内のコンテンツのみであり、ページ全体ではない。
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
</head>
<body>
<button id="loadButton">データをロード</button>
<div id="dataContainer">ここにデータが表示されます</div>
<script src="script.js"></script>
</body>
</html>
// script.js
document.getElementById('loadButton').addEventListener('click', function() {
var xhr = new XMLHttpRequest(); // XMLHttpRequest オブジェクトを作成
xhr.open('GET', 'data.txt'); // data.txtからデータを取得するGETリクエストを設定
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('dataContainer').innerHTML = xhr.responseText; // レスポンスをdataContainerに挿入。DOMが使われている
}
};
xhr.send(); // リクエストを送信
});
シングルページアプリケーション（SPA）
Ajaxの発展により、ウェブアプリケーションはさらに進化し、シングルページアプリケーション（SPA）の概念が...
続きは、こちらで記載しています。
https://kazulog.fun/dev/ssr-ajax-spa-dom-react-pwa/