Frontend Academy · レッスン

SSG・SSR・ISR

ビルド時にページを静的生成し、リクエストごとにサーバーレンダリングする方法や、Incremental Static Regenerationでスケジュールに従ってキャッシュ済みページを再検証する方法を学びます。

「SSG・SSR・ISR」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

3つのレンダリング戦略

Next.jsでは、ページをレンダリングする方法として、SSG（Static Site Generation）、SSR（Server-Side Rendering）、ISR（Incremental Static Regeneration）の3つを使用できます。それぞれに異なるトレードオフがあります。

SSG — ビルド時の生成

ページはビルド時に静的HTMLとして生成され、CDNから配信されます。可能な限り高速に配信できます。マーケティングページ、ブログ、ドキュメントに適しています。

Pages RouterでのSSG

ページからgetStaticPropsをエクスポートします。この関数はビルド時に実行され、コンポーネントにPropsを渡します。

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

App RouterでのSSG

デフォルトでは、非同期のServer Componentsがビルド時にデータを取得します。動的ルートにはgenerateStaticParamsを使用します。

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.body}</article>;
}

SSR — リクエストごとの生成

ページはリクエストのたびにレンダリングされます。ユーザーごとに内容が異なる場合や、キャッシュするには頻繁に変更される場合に使用します。

Pages RouterでのSSR

getServerSidePropsをエクスポートします。

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

App RouterでのSSR

dynamic = 'force-dynamic'を指定するか、cookies/headersを読み取ることで、リクエストごとのレンダリングを強制できます。cookies/headersを読み取ると、静的レンダリングは自動的に無効になります。

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR — 両方の長所

ISRでは、静的ページを配信しながら、N秒ごとにバックグラウンドで再生成します。SSGの速度と、ある程度新しいデータの両方を実現できます。

Pages RouterでのISR

getStaticPropsにrevalidateを追加します。

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

App RouterでのISR

fetchのオプションにnext: { revalidate: N }を指定するか、ページでexport const revalidate = Nを設定します。

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

オンデマンド再検証

時間間隔を待たずに、手動で再生成を開始できます（CMSのWebhookから実行する場合など）。

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

適切な戦略を選ぶ

データの変更が少ない場合（マーケティング、ドキュメント、ブログ）はSSGを使用します。データがときどき更新される場合（CMS連携サイト、ECの商品一覧）はISRを使用します。ユーザーごとに異なるコンテンツ（ダッシュボード、アカウントページ）にはSSRを使用します。

クイックチェック

ISR（Incremental Static Regeneration）は、純粋なSSGにはないどのような処理を行いますか？

振り返り：SSG、SSR、ISR

SSG：ビルド時に生成され、最速ですが、内容は固定されます。SSR：リクエストごとに生成され、動的ですが、遅くなります。ISR：SSGに定期的なバックグラウンド再生成を組み合わせたもので、ある程度新しいデータと速度を両立します。Pages RouterではgetStaticProps/getServerSidePropsを使用します。App Routerでは、再検証を指定したfetchを使う非同期Server Components、またはページレベルのrevalidate定数を使用します。オンデマンド更新にはrevalidatePath/Tagを使用します。

よくある質問

「SSG・SSR・ISR」レッスンは無料ですか？

はい。「SSG・SSR・ISR」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「SSG・SSR・ISR」で何を学びますか？

ビルド時にページを静的生成し、リクエストごとにサーバーレンダリングする方法や、Incremental Static Regenerationでスケジュールに従ってキャッシュ済みページを再検証する方法を学びます。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「SSG・SSR・ISR」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る