CSR（クライアントサイドレンダリング）とクライアントサイドルーティング
経緯
本業の方で、Next.JS 13（App RouterはまだBeta版）を用いて開発、というか既存のレガシーな作りを取っ払ってNextにreplaceしちゃおうぜ計画を行っている。
その際に技術的に気になったことをメモしていく。できれば継続的に🐟
今回は、前回の記事から派生した、とても些細な疑問↓
それぞれの概要
1. クライアントサイドレンダリング (CSR)
ページの レンダリング（つまりHTMLの生成） がクライアントサイド（ブラウザ）で行われることを指している。
初期ロード時、空のHTMLがサーバから送られ、その後JavaScriptがダウンロードされ、実行されてからページのコンテンツが生成される。
一度初期ロードが完了した後は、ページの再描画やコンテンツの変更はクライアントサイドで行われる仕組み。
2. クライアントサイドルーティング（クライアントサイドナビゲーション）
ページ間の ナビゲーション（すなわち新しいページへの遷移） がブラウザ上（クライアントサイド）で行われることを指す。
この方法では、新しいページへのリンクがクリックされると、ブラウザは新たにページ全体をサーバから取得するのではなく、必要なデータだけを取得（通常はAPI経由）し、それを用いて新しいページをレンダリングする。
クライアントサイドルーティングでは、ユーザーが新しいページへのリンクをクリックしても、ブラウザは全く新しいHTMLページをサーバーから取得しない。代わりに、JavaScript（具体的にはルーティングライブラリ）が新しいURLに基づいてブラウザに表示すべき新しい「ページ」（通常は特定のコンポーネント）を決定する。
Single Page Applications (SPA)で特によく使われる手法で、Next.JS使ってれば、LinkやuseRouterフックを使って簡単に実現できる。
同じようでとても微妙に違う。というか記事によっては、二つを同じニュアンスで捉えて説明してたりもする。
URLが変更されたらそれを検知し、クライアントサイドルーティングが行われて必要なデータのみサーバーから取得し、ルーティングで指定された新たなページのコンポーネントに対して、クライアントサイドで再度レンダリングが行われる。
この一連の流れがCSRという認識（周りくどい言い回し）
Discussion