先生と生徒の会話形式で理解しよう

生徒

「先生、Next.jsで作ったウェブサイトってなんでこんなに速いんですか？」

先生

「それはNext.jsのSSG、つまり静的サイト生成という仕組みを使っているからなんです。」

生徒

「静的サイト生成って何ですか？」

先生

「簡単に言うと、ウェブページをあらかじめ完成させて保存しておく方法です。訪問者がページを見るときにサーバーで毎回作るのではなく、最初からできているページをそのまま渡すのでとても速くなるんですよ。」

生徒

「なるほど、それでCDNも関係してくるんですね？」

先生

「そうです。CDNを使うと、世界中のサーバーに静的ファイルを置くことができるので、どこからアクセスしても速くページが表示されます。」

1. SSGとは何か？Next.jsの静的サイト生成の基本

Next.jsのSSG（Static Site Generation）は、ウェブページを事前にHTMLとして生成しておく仕組みです。これにより、ユーザーがページを開いたときにサーバー側でページを動的に作る必要がなく、ブラウザにそのまま送信されます。

たとえば、ブログ記事を毎回サーバーで組み立てるのではなく、ビルド時に全記事のHTMLを作っておきます。訪問者はそのHTMLをすぐ受け取ることができるため、表示速度が速くなります。

2. Next.js SSGが高速な理由：静的ファイルの配信

SSGで生成されたページは静的ファイルとして保存されます。静的ファイルとは、HTMLやCSS、画像のようにそのまま配信できるファイルのことです。動的に作る必要がないため、サーバーの負荷も少なく、アクセスが集中しても速く表示できます。


export async function getStaticProps() {
  return {
    props: {
      message: "これは静的に生成されたページです"
    }
  };
}

function Home({ message }) {
  return <h1>{message}</h1>;
}

export default Home;

（画面に「これは静的に生成されたページです」と表示されます）

3. CDNとの組み合わせでさらに高速化

CDN（Content Delivery Network）とは、世界中にあるサーバーにウェブサイトのファイルを分散して置く仕組みです。ユーザーは地理的に近いサーバーからファイルを取得できるので、ページ表示が速くなります。


/* 例：Next.jsの画像最適化とCDN活用 */
import Image from "next/image";

function Profile() {
  return <Image src="/profile.jpg" width={200} height={200} alt="プロフィール画像" />;
}

export default Profile;

（画像がCDN経由で配信されるため高速に表示されます）

4. SSGとSSRの違いを理解する

Next.jsにはSSGのほかにSSR（Server Side Rendering）という方法もあります。SSRはアクセス時にサーバーでページを生成する方式で、データが常に最新になります。しかし、その分読み込み時間がかかります。SSGは先にHTMLを作っておくため、速度面で有利です。


export async function getServerSideProps() {
  return {
    props: {
      message: "これはサーバーで生成されるページです"
    }
  };
}

function ServerPage({ message }) {
  return <h1>{message}</h1>;
}

export default ServerPage;

（画面に「これはサーバーで生成されるページです」と表示されます）

5. ビルド時に生成するメリット

SSGではビルド時にページを生成します。これにより、サーバーに負荷をかけずに高速表示が可能です。また、事前生成されているため、検索エンジンにも認識されやすくSEOにも有利です。


export async function getStaticProps() {
  const data = await fetch("https://api.example.com/posts").then(res => res.json());
  return { props: { posts: data } };
}

function Blog({ posts }) {
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

export default Blog;

（ビルド時に記事リストが生成され、アクセス時は即表示されます）

まとめ

（振り返りのまとめ）

先生と生徒の振り返り会話