個人で SSG を、社内システムで SSR を使ったが、備忘録としてそれぞれ 4 つの記法とメリット・デメリットを記しておきます。
Next.js のレンダリング手法の比較と実装方法
Next.js では、ページのレンダリング手法として SSR（Server-Side Rendering）、SSG（Static Site Generation）、ISR（Incremental Static Regeneration）、CSR（Client-Side Rendering） の 4 つが提供されています。これらの手法は、データ取得のタイミングやレンダリングの場所が異なり、アプリケーションのパフォーマンスやユーザー体験に大きく影響します。
1. SSR（Server-Side Rendering）
特徴:
- データ取得タイミング: ユーザーからのリクエストごとにサーバー側でデータを取得し、HTML を生成します。
- レンダリング場所: サーバー側。
メリット:
- 常に最新のデータを表示できます。
- サーバーでレンダリングされた HTML を返すため、SEO に適しています。
デメリット:
- リクエストごとにサーバーで HTML を生成するため、サーバー負荷が高くなります。
- ユーザーのリクエストに対してサーバーで処理を行うため、応答速度がネットワーク状況やサーバー性能に依存します。
適したアプリケーション要件:
- ユーザーごとに異なるデータを表示する必要があるダッシュボードやユーザープロフィールページ。
- 頻繁に更新されるデータを表示するニュースサイトやブログ。
実装方法:
getServerSideProps 関数を使用して、リクエストごとにデータを取得します。
コード例:
// pages/ssr-example.js
export async function getServerSideProps() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
return { props: { data } };
}
function SSRExample({ data }) {
return (
<div>
<h1>SSR Example</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default SSRExample;
このコードでは、ユーザーのリクエストごとに getServerSideProps が実行され、最新のデータが取得されます。
2. SSG（Static Site Generation）
特徴:
- データ取得タイミング: ビルド時にデータを取得し、静的な HTML を生成します。
- レンダリング場所: ビルド時のサーバー側。
メリット:
- 静的な HTML を配信するため、ページの読み込み速度が速く、サーバー負荷も低いです。
- SEO に適しています。
デメリット:
- データの更新には再ビルドが必要なため、リアルタイム性が求められるアプリケーションには不向きです。
適したアプリケーション要件:
- コンテンツの更新頻度が低い企業のコーポレートサイトや製品カタログ。
- 事前に生成されたコンテンツを提供するブログやドキュメンテーションサイト。
実装方法:
getStaticProps 関数を使用して、ビルド時にデータを取得します。
コード例:
// pages/ssg-example.js
export async function getStaticProps() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
return { props: { data } };
}
function SSGExample({ data }) {
return (
<div>
<h1>SSG Example</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default SSGExample;
このコードでは、ビルド時に getStaticProps が実行され、静的な HTML が生成されます。
3. ISR（Incremental Static Regeneration）
特徴:
- データ取得タイミング: ビルド時に静的な HTML を生成し、指定した間隔でバックグラウンドで再生成します。
- レンダリング場所: ビルド時のサーバー側およびバックグラウンドプロセス。
メリット:
- SSG の高速性を維持しつつ、定期的なデータ更新が可能です。
- SEO に適しています。
デメリット:
- 再生成の間隔内でのデータ更新は反映されないため、リアルタイム性には限界があります。
適したアプリケーション要件:
- 定期的に更新されるブログやニュースサイト。
- 頻繁に更新されるが、リアルタイム性がそれほど重要でないコンテンツ。
実装方法:
getStaticProps 関数内で revalidate プロパティを設定します。
コード例:
// pages/isr-example.js
export async function getStaticProps() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
return {
props: { data },
revalidate: 60, // 60 秒ごとにページを再生成
};
}
function ISRExample({ data }) {
return (
<div>
<h1>ISR Example</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default ISRExample;
このコードでは、ビルド時に getStaticProps が実行され、初回の静的 HTML が生成されます。その後、revalidate で指定した秒数（この例では 60 秒）ごとに、バックグラウンドでページが再生成され、最新のデータが反映されます。
4. CSR（Client-Side Rendering）
特徴:
- データ取得タイミング: クライアント側でコンポーネントのマウント時やユーザーの操作時にデータを取得します。
- レンダリング場所: クライアント（ブラウザ）側。
メリット:
- ユーザーの操作に応じて、リアルタイムでデータを更新できます。
- 初期ロード後のページ遷移が高速で、スムーズなユーザー体験を提供できます。
デメリット:
- 初回ロード時に JavaScript やデータの取得が必要なため、表示までに時間がかかることがあります。
- SEO 対策が難しい場合があります。
適したアプリケーション要件:
- ユーザーの操作に応じて頻繁にデータが変わるダッシュボードやチャットアプリ。
- リアルタイム性が求められるアプリケーション。
実装方法:
React の useEffect フックを使用して、クライアントサイドでデータを取得します。
コード例:
// pages/csr-example.js
import { useEffect, useState } from "react";
function CSRExample() {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
setData(data);
}
fetchData();
}, []);
if (!data) {
return <div>Loading...</div>;
}
return (
<div>
<h1>CSR Example</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default CSRExample;
このコードでは、コンポーネントのマウント時に useEffect フック内でデータを取得し、取得したデータをコンポーネントの状態に保存します。データが取得されるまで「Loading...」と表示し、データ取得後に内容を表示します。