ひとことで言うと
静的レンダリング（Static Rendering）とは、ビルド時（デプロイ前）にすべてのページをHTMLファイルとして生成し、ユーザーのリクエストに対してその既製品ファイルを返す方式です。Next.jsの`getStaticProps`やAstroのデフォルト動作がこれに相当します。サーバー側でプログラムを実行する必要がないため、CDNから直接配信でき、表示速度とスケーラビリティが高いという特徴があります。
AIがコードを生成してHTMLを出力する場合、そのHTMLが単独で動作するならすでに「静的レンダリング済み」の状態です。追加でビルドやサーバー起動が不要なため、ファイルをそのままギガサイト便やCloudflare Pagesにアップロードするだけで即座に公開できます。コールドスタートやサーバー障害の心配もなく、プレビュー共有との相性が最も良い形式です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
AIが出力した単一のHTMLファイルは、画像や外部APIを使わない限り完全な静的ファイルです。このファイルをドラッグ＆ドロップでアップロードするだけでURLが発行されるギガサイト便のような静的共有サービスと最も相性が良く、アップロードから3秒で確認者にURLを送れます。React・Vue・Angularで作ったSPAの場合は`npm run build`後の`dist`フォルダをzipにまとめてアップすると同様に静的配信できます。
静的レンダリングでは、ユーザーの操作に応じてコンテンツを変えるためにはクライアント側JavaScriptを使います。ログインユーザー専用のコンテンツを見せたい場合は、HTMLをロードした後にJavaScriptがAPIを叩いてデータを取得する「静的HTML＋クライアントサイドフェッチ」の構成になります。この場合APIサーバーは別途必要ですが、HTMLファイル自体は静的に共有できます。
よくある誤解
「静的HTMLはインタラクティブにできない」という誤解があります。静的レンダリングはHTMLの初期状態をビルド時に生成するだけで、そこにどれだけJavaScriptを含めてもかまいません。アニメーション・フォーム送信・モーダル表示など、クライアント側で完結する処理はすべて静的HTMLで実現できます。
「静的レンダリングは更新が大変」という印象を持つ方もいますが、AIに修正を依頼して新しいHTMLを生成し直してアップロードし直すだけです。CMSやデータベースの管理が不要な分、小規模なプレビュー資料の差し替えには静的レンダリングが最もシンプルです。
安全に使うための注意点
静的HTMLに埋め込まれたAPIキーや秘密情報はソースコードが公開される環境では誰でも読めます。ブラウザのJavaScriptに秘密情報を書くと、共有URLにアクセスした人全員がソースから読み取れます。AIが生成したコードに`REACT_APP_API_KEY`などの環境変数が直書きされていないか、共有前にHTMLソースを検索して確認してください。
静的HTMLをプレビュー共有する際は、配信URLをパスワードや認証で保護することで意図しない第三者へのアクセスを防げます。ギガサイト便はメール認証や会社ドメイン認証を備えているため、社外秘のデザイン案や企画書HTMLを社外の承認者に見せる際の適切な保護手段として機能します。
よくある質問
AI生成のHTMLは静的レンダリングと言えますか？
はい。AIが最初からHTMLを出力する場合、ビルドや実行時レンダリングなしにファイルが存在するため、すでに静的レンダリング済みの状態です。追加のビルド作業なしにそのまま静的ホスティングに配置できます。
静的HTMLでリアルタイムデータを表示することはできますか？
できます。HTMLをロードした後にJavaScriptからAPIをフェッチしてDOMを更新する手法で実現します。HTMLファイル自体は静的ですが、表示内容はリアルタイムで変化させられます。
静的HTMLをzip圧縮してギガサイト便にアップする場合、フォルダ構成の制約はありますか？
index.htmlをルートに置いたフォルダ構成をzipにまとめてアップロードします。サブフォルダやアセット（CSS・画像）のパスはHTMLからの相対パスが正しく設定されていれば問題なく機能します。