Next.jsにおけるPre-rendering: SSRとSSGについて

React 界隈でいま最も勢いのあるフレームワークは、Next.js です。Next.js は React に最適化されたルーティングやミドルウェア機能を標準搭載し、そして SSR 機能も提供してくれるフレームワークです。
Next.jsはReactのエコシステム内で急速に普及しているフレームワークであり、その強力なPre-rendering機能が大きな魅力となっています。この記事では、その2つの主要なPre-rendering手法、SSRとSSGの違いと実装方法について詳しく解説します。

1. Server Side Rendering (SSR)
定義:
SSRは、クライアントからのリクエストがあるたびにサーバー上でページをレンダリングする方法です。
実装方法:
Next.jsでのSSRの実装は非常にシンプルです。ページコンポーネント内でgetServerSideProps関数を定義するだけです。
１．ユーザーからのリクエストがサーバーに送信される。
２．サーバーはリクエストごとにページをレンダリングします。
３．レンダリングされたページがユーザーに返され、ブラウザで表示されます。

export async function getServerSideProps(context) {
  // データフェッチやDBのクエリをここで行う
  const data = await fetchData();

  return {
    props: { data }
  };
}

function MyPage({ data }) {
  return (
    <div>
      {/* レンダリングのロジック */}
    </div>
  );
}

export default MyPage;

特徴と利点:

• リアルタイムのデータを表示するのに適しています。

• SEOのメリットがあります。検索エンジンはサーバーから返されるHTMLを直接クロールできます。

• クッキーやユーザーエージェントなどのサーバーサイドの情報にアクセスできます。

デメリット:

• トラフィックが多い場合、サーバーに大きな負荷がかかります。

• CDNの利用が難しくなります。

2. Static Site Generation (SSG)
定義:
SSGは、ビルド時にページのHTMLを一度だけ生成し、その後はそのHTMLを再利用する方法です。
実装方法:
Next.jsでのSSGの実装もSSRと同様に簡単です。ページコンポーネント内でgetStaticProps関数を定義するだけです。
１．ビルドプロセス中にページが一度レンダリングされ、その結果がサーバーに保存されます。
２．ユーザーからのリクエストが来るたびに、保存されたページが提供されます。
３．ユーザーのブラウザでページが表示されます。

export async function getStaticProps() {
  // ビルド時にデータフェッチやDBのクエリを行う
  const data = await fetchData();

  return {
    props: { data },
    revalidate: 60 // オプション: 60秒後に再生成
  };
}

function MyPage({ data }) {
  return (
    <div>
      {/* レンダリングのロジック */}
    </div>
  );
}

export default MyPage;

特徴と利点:

• 高速なパフォーマンスを提供します。すでに生成されたHTMLが返されるため、サーバーのレンダリングが不要です。

• CDNとの相性が非常に良く、世界中のエッジサーバーでコンテンツをキャッシュできます。

• SEOのメリットもあります。

デメリット:

• ビルド時にしかHTMLが生成されないため、リアルタイムの更新が難しいです。ただし、revalidateオプションを使用して、定期的に再生成を行うことができます。

どちらを選ぶべきか?

• SSRは、リアルタイムのデータやサーバーサイドの情報が必要な場合に適しています。

• SSGは、静的なコンテンツや更新頻度が低いページ、高速な読み込みを求めるページに適しています。

まとめ

Next.jsは、SSRとSSGの両方のメリットを活かすことができる強力なフレームワークです。プロジェクトの要件や特性に応じて、適切なPre-rendering手法を選択することが大切です。