ひとことで言うと
クライアントサイドレンダリング（CSR）とは、HTMLファイルをブラウザが受け取った後、JavaScriptが動いてはじめてページの中身が画面に描画される方式のことだ。サーバーから届くHTMLはほぼ空の骨格で、実際のコンテンツはJSが非同期で生成する。
AI生成ツール（v0やBolt、Lovaなど）が出力するファイルの多くはReactやVueなどのCSRフレームワークを前提に作られており、そのまま静的HTMLとして共有しようとすると白紙ページになることがある。これはCSRの仕組みを知らないと原因に気づきにくい典型例だ。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
CSRで作られたページをzipに圧縮して相手に送ったとき、受け取った側がHTMLファイルをダブルクリックで開くと、`file://`プロトコルではJS間のモジュール読み込みがブロックされ、コンテンツが一切表示されないケースがある。ギガサイト便のようなHTTPS配信サービスを使うと、この問題を回避して3秒で安全なプレビューURLを作れる。
CSRアプリはビルド後に`index.html`と`assets/`フォルダが分かれる構成が多い。共有する際に`index.html`だけをコピーしてassetsフォルダを忘れると、JSバンドルが読み込まれずまた白紙になる。フォルダごとzip化して共有するのが確実だ。
よくある誤解
「HTMLファイルを渡せばどこでも動く」と思いがちだが、CSRアプリは独立したHTMLファイルではなく、JSバンドルとセットで動くシステムだ。ファイル単体をメール添付しても受け取った側が表示できないのはこのため。
もう一つよくある誤解は「CSRはSEOに弱い」という一般論を鵜呑みにすること。現在のGooglebotはJSを実行してインデックスするが、インデックス遅延は確かに発生しうる。社内レビュー用途の一時共有であればSEOは関係なく、純粋に相手のブラウザでJSが動くかだけを確認すれば十分だ。
安全に使うための注意点
CSRアプリをそのままパブリックなURLで共有すると、ソースマップファイルが含まれている場合にコードの内部実装が丸見えになる。共有前に`*.map`ファイルを削除するか、ビルド設定で`sourcemap: false`に変更しておくこと。
開発モードのまま出力したCSRアプリには`console.log`デバッグ出力やAPIキーのハードコードが残っていることがある。共有前にブラウザのDevToolsでネットワークタブを確認し、外部へのAPI呼び出しに機密情報が含まれていないかを必ずチェックする習慣をつけよう。
よくある質問
CSRで作ったサイトをギガサイト便でアップロードするとき、フォルダ構成はどうすればいいですか？
ビルド成果物のフォルダ（distやout）をそのままzipにして渡すのが最も確実です。index.htmlとassetsフォルダがzip直下に来るよう構成し、ネストが深くならないよう注意してください。
CSRアプリのプレビューURLを受け取ったが、画面が真っ白になる。何が原因ですか？
assetsフォルダが含まれていないか、JSバンドルのパスがルート相対（/assets/）になっていてサブディレクトリ配信と合っていない可能性があります。viteなら`base`オプションを`./`に変更して再ビルドしてください。
AI生成サイトをCSRとSSR（静的HTML）のどちらで共有すべきか判断する基準はありますか？
受け取る相手がURLをブラウザで開くだけならどちらでも可。ただしメール添付や社内ファイルサーバー経由なら、SSR（静的HTML）の方がJSなしでも読めて確実です。