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手法を選択することが大切です。