「getServerSideProps」（Next.js）の内部 API 呼び出しに「fetch()」を使用する必要がありますか?

getServerSideProps による内部 API フェッチ? (Next.js)

Next.js では、getServerSideProps 関数を使用してページをレンダリングする前にサーバーからデータを取得できるため、SEO に適しています。ただし、公式ドキュメントでは、 getServerSideProps 内で内部 API ルートを呼び出すために fetch() を使用しないことを推奨しています。

回避理由

getServerSideProps から内部 API ルートを呼び出すことは冗長です。どちらもサーバー上で実行されます。代わりに、API ルートからのロジックを getServerSideProps に直接実装して、不要な HTTP リクエストを回避する必要があります。

代替アプローチ

getServerSideProps で API ルートからのロジックを利用するには:

• フェッチ ロジック (データベース アクセスや外部 API 呼び出しなど) を、API ルートと getServerSideProps の両方で共有できる別個の関数に抽出します。
• API ルート内では、この共有関数を呼び出してデータを取得して返します。
• getServerSideProps で、同じ共有関数を呼び出してサーバーから直接データを取得します。

例

pages/api/user.js (共有ロジックを使用した API ルート)

import { getData } from "./userData";

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

pages/home.js (getServerSideProps を使用共有ロジック)

import { getData } from "./api/user";

export async function getServerSideProps(context) {
  const data = await getData();
  // ... other operations ...
}

以上が「getServerSideProps」（Next.js）の内部 API 呼び出しに「fetch()」を使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。