---
title: "サーバーサイドレンダリングとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "サーバーサイドレンダリング（SSR）の仕組みをAI生成サイトのプレビュー共有の文脈で解説。静的HTML配信との違い、プレビュー用途でSSRが必要な場面と不要な場面が分かります。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-server-side-rendering-html-share"
markdown: "https://giga-site.com/articles/what-is-server-side-rendering-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# サーバーサイドレンダリングとは？HTML共有・AI生成サイトでの意味をやさしく解説

サーバーサイドレンダリング（SSR）とは、ユーザーのリクエストを受けるたびにサーバー上でHTMLを生成して返す方式です。動的なコンテンツを最初からHTMLに含められるためSEOに有利ですが、プレビュー共有の観点では「サーバーが必要」という制約が生じます。AI生成サイトをSSRで共有したい場合と静的HTMLで十分な場合の違いを整理しておきましょう。

> Source HTML: https://giga-site.com/articles/what-is-server-side-rendering-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

サーバーサイドレンダリング（SSR）はリクエストのたびにサーバーでHTMLを生成して返す方式で、Next.js（`getServerSideProps`）やNuxt.js、SvelteKitなどのフレームワークが対応しています。静的レンダリングと異なり、データベースや外部APIから最新データを取得してHTMLに反映できるため、ユーザーごとにコンテンツを変えたりリアルタイム情報を初期表示に含めたりできます。

ただしSSRでは毎回サーバーがHTMLを生成するため、サーバープロセスが常に動いている必要があります。ギガサイト便のような「ファイルをアップするだけ」の静的共有サービスにはSSRアプリをそのまま配置できません。プレビュー共有のためだけにSSRを使うケースは少なく、多くの場合は静的エクスポートか静的スナップショットの方が運用が楽です。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

AIで生成したNext.jsアプリをSSRのままプレビュー共有したい場合、VercelやRailwayなどのサーバーを持つホスティングにデプロイする必要があります。URLを発行してすぐに共有できるため便利ですが、デプロイに数分かかることと、サーバー費用が発生する点が違いです。一方、確認用として一度きりのプレビューなら`next export`で静的HTMLに書き出してギガサイト便で共有する方が素早くコストもゼロです。

SSRが必要な場面は「表示するデータが確認者のログイン状態や時刻によって変わる」ケースです。例えばCRM画面のプレビューで特定の営業担当に絞った案件一覧を見せたい場合、静的HTMLではダミーデータを埋め込む必要がありますが、SSRであれば実データベースから取得して表示できます。この場合はSSRの利便性がコストを上回ります。

## よくある誤解

「SSRとSPAは対立するもの」という誤解があります。Next.jsはSSRとクライアントサイドのReactを組み合わせており、初回表示はSSRでHTMLを返し、以降のページ遷移はクライアントサイドで行うハイブリッド構成が一般的です。AI生成のNext.jsアプリもこの構成になっていることが多く、静的エクスポートに切り替えると一部の動的ルートが使えなくなることがあります。

「SSRはSEOに強いから必ず選ぶべき」という考えも場合によります。プレビュー共有の用途であればSEOは不要なため、静的HTMLの方が配信が速く管理も簡単です。最終的な公開サイトがSSRを必要とする場合でも、プレビュー段階では静的スナップショットで十分なことがほとんどです。

## 安全に使うための注意点

SSRアプリをプレビュー共有する際は、環境変数（APIキー・DBパスワード）がブラウザに露出しないよう注意が必要です。Next.jsでは`NEXT_PUBLIC_`プレフィックスがない環境変数はクライアントには届きませんが、`NEXT_PUBLIC_`付きの変数はビルドに含まれてしまいます。AI生成コードに不必要な`NEXT_PUBLIC_`変数が含まれていないかを共有前に確認してください。

SSRアプリをVercel等にデプロイしてプレビューURLを共有する場合、デプロイURLは公開状態になることが多いです。確認者以外がアクセスできないよう、Vercelの「Password Protection」機能やギガサイト便のメール認証のような保護を組み合わせてください。アクセス制御なしのプレビューURLをSlackなどのオープンなチャンネルに貼ると、意図しない第三者が閲覧できる状態になります。

## よくある質問

### SSRアプリのプレビューを静的HTMLに変換してギガサイト便で共有できますか？

Next.jsなら`next build`後に静的エクスポートオプションを設定することで可能です。動的ルートや`getServerSideProps`を使っているページはエクスポートできないため、ダミーデータを差し込んで静的化する対応が必要になる場合があります。

### SSRとSSGの違いを一言で教えてください。

SSR（サーバーサイドレンダリング）はリクエストのたびにサーバーでHTMLを生成、SSG（静的サイト生成）はビルド時に一度だけHTMLを生成します。プレビュー共有ではSSGの方がサーバー不要で配信が速いため扱いやすいです。

### 確認者にSSRアプリのプレビューを送る最も手軽な方法は？

Vercelへのデプロイが最も手軽です。GitHubリポジトリを連携するだけでプレビューURLが自動発行されます。ただしアクセス制御なしで公開されるため、機密性の高い内容はPassword Protection設定を有効にしてからURLを共有してください。

## 関連記事

- [クライアントサイドレンダリングとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-client-side-rendering-html-share/index.md)
- [静的レンダリングとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-static-rendering-html-share/index.md)
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "サーバーサイドレンダリングとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "サーバーサイドレンダリング（SSR）の仕組みをAI生成サイトのプレビュー共有の文脈で解説。静的HTML配信との違い、プレビュー用途でSSRが必要な場面と不要な場面が分かります。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-server-side-rendering-html-share",
  "url": "https://giga-site.com/articles/what-is-server-side-rendering-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "SSRアプリのプレビューを静的HTMLに変換してギガサイト便で共有できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Next.jsなら`next build`後に静的エクスポートオプションを設定することで可能です。動的ルートや`getServerSideProps`を使っているページはエクスポートできないため、ダミーデータを差し込んで静的化する対応が必要になる場合があります。"
      }
    },
    {
      "@type": "Question",
      "name": "SSRとSSGの違いを一言で教えてください。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SSR（サーバーサイドレンダリング）はリクエストのたびにサーバーでHTMLを生成、SSG（静的サイト生成）はビルド時に一度だけHTMLを生成します。プレビュー共有ではSSGの方がサーバー不要で配信が速いため扱いやすいです。"
      }
    },
    {
      "@type": "Question",
      "name": "確認者にSSRアプリのプレビューを送る最も手軽な方法は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Vercelへのデプロイが最も手軽です。GitHubリポジトリを連携するだけでプレビューURLが自動発行されます。ただしアクセス制御なしで公開されるため、機密性の高い内容はPassword Protection設定を有効にしてからURLを共有してください。"
      }
    }
  ]
}
```