ISRと天気予報サイトでの使用

1. はじめに

このドキュメントでは、Next.jsのレンダリング方式の一つであるISR（Incremental Static Regeneration）について解説します。 その後、外部APIの利用回数制限がある場合に、どのようにISRが有効かを天気予報サイトを例に説明します。

2. Webページのレンダリング方式

まず、Webページがどのタイミングで生成されるかによって、大きく4つの方式があります。

レンダリング方式の比較表

3. ISRの仕組み

ISRは「静的サイトのパフォーマンス」と「動的サイトのデータ鮮度」を両立する仕組みです。

ISRの動作フロー

4. 本プロジェクトでの活用

4.1 なぜISRを採用したか

本プロジェクトでは、OpenWeatherMap APIを使用して天気データを取得しています。このAPIには以下の制限があります。

もしSSR（リクエスト毎に取得）を採用していた場合、ユーザーがアクセスするたびにAPIを呼び出すため、すぐに制限に達してしまいます。

4.2 レンダリング方式の選択理由

5. 実装箇所（コード抜粋）

5.1 OpenWeatherMap APIでの実装

Next.jsでは、fetch関数にnext.revalidateオプションを指定することでISRを実現します。

lib/api-client.ts

/**
 * OpenWeatherMap API への共通リクエスト処理
 */
async function fetchFromOpenWeatherMap<T>(
  endpoint: string,
  params: Record<string, string | number>
): Promise<T> {
  const url = new URL(`${OPENWEATHERMAP_BASE_URL}${endpoint}`)

  // パラメータ設定...

  const response = await fetch(url.toString(), {
    next: { revalidate: 1800 }, // 30分間キャッシュ、その後再検証
  })

  return response.json() as Promise<T>
}

5.2 One Call API 3.0 でも同様に実装

lib/api-client.ts

/**
 * One Call API 3.0 への共通リクエスト処理
 * 現在の天気、48時間の時間別予報、8日間の日別予報を一度に取得
 */
async function fetchFromOneCallApi<T>(
  endpoint: string,
  params: Record<string, string | number>
): Promise<T> {
  const url = new URL(`${OPENWEATHERMAP_ONECALL_URL}${endpoint}`)

  // パラメータ設定...

  const response = await fetch(url.toString(), {
    next: { revalidate: 1800 }, // 30分間キャッシュ、その後再検証
  })

  return response.json() as Promise<T>
}