Next.js の getServerSideProps() で内部 API をフェッチし、キャッシュを実装する方法は?

getServerSideProps での内部 API の取得: ベスト プラクティスとキャッシュ

Next.js では、ページとコンポーネント間のデータを効果的に管理することが重要です。ただし、適切なコーディング方法と SEO コンプライアンスを確保するには、特定の方法に従う必要があります。この記事では、getServerSideProps() 内で内部 API フェッチを実行する問題について説明します。

getServerSideProps() での fetch() の使用

これまでの理解に反して、Next.js ドキュメントでは fetch() を使用しないことを推奨しています。 ) getServerSideProps() 内で内部 API ルートを呼び出します。代わりに、API ルートから直接 getServerSideProps() にロジックを転送することを提案します。これにより、getServerSideProps() と API ルートの両方がサーバー上で実行されるため、不要な追加のリクエストが排除されます。

API ロジックを抽出する利点

フェッチ ロジックを API ルートから分離すると、API ルートの再利用が可能になるだけでなく、 API ルート自体内だけでなく、getServerSideProps() 内でも同様です。このアプローチにより、コードベースの管理が簡素化され、柔軟性が向上します。

キャッシュに関する考慮事項

キャッシュは、パフォーマンスの向上において重要な役割を果たします。 SWR などの技術を使用したクライアント側のキャッシュは簡単です。ただし、サーバー上でキャッシュを実現するには、別のアプローチが必要です。 1 つの手法は、Redis や Memcached などのサーバー側キャッシュ メカニズムを利用して、キャッシュ ロジックを getServerSideProps() 内に直接実装することです。

リファクタリングの例

次の例を考えてみましょう:

// pages/api/user.js
export async function getData() {
  const response = await fetch(/* external API endpoint */);
  const jsonData = await response.json();
  return jsonData;
}

export default async function handler(req, res) {
  const jsonData = await getData();
  res.status(200).json(jsonData);
}

この例では、フェッチロジックをカプセル化する getData() 関数を利用できます。 API ルート ハンドラー内と getServerSideProps() 内の両方で。これにより、よりクリーンなコードと効率的なデータ取得が可能になります。

以上がNext.js の getServerSideProps() で内部 API をフェッチし、キャッシュを実装する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。