getServerSideProps() で内部 API のフェッチの使用を避けるべきなのはなぜですか?

Next.js の getServerSideProps を使用した内部 API フェッチ

Next.js を初めて使用する人は、ページ間でのデータのフェッチを扱うときにジレンマに遭遇することがよくあります。コンポーネント。たとえば、 getServerSideProps() を使用してユーザー データを返す内部 API をフェッチする場合、このアプローチが SEO の目的には理想的であると考えるのは自然なことです。ただし、Next.js のドキュメントでは、 getServerSideProps() 内で API ルートを呼び出すために fetch() を使用しないことを推奨しています。 getServerSideProps() 内で fetch() を使用して内部 API ルートを呼び出すことは不要です。 getServerSideProps() と API ルートはサーバー上で実行されます。この追加のリクエストは非効率的であり、追加の利点はありません。

推奨プラクティス

getServerSideProps() から内部 API を呼び出す代わりに、ロジックをAPI ルート。これにより、getServerSideProps() は、不要な API 呼び出しを導入することなく、データベース、ファイルシステム、またはその他のリソースと直接対話できるようになります。

リファクタリングの例

フェッチに使用される API ルートを検討してください。外部 API からのデータ:

このロジックは、使用できる別の関数に抽出できます。 API ルートと getServerSideProps():

これにより、getData() 関数を getServerSideProps():

// pages/api/user
export default async function handler(req, res) {
  const response = await fetch(/* external API endpoint */);
  const jsonData = await response.json();
  res.status(200).json(jsonData);
}

で再利用できるようになります。これらのガイドラインに従うことで、開発者は次のことを行うことができます。 SEO のメリットを維持しながら、Next.js アプリケーションのパフォーマンスと効率を向上させます。

以上がgetServerSideProps() で内部 API のフェッチの使用を避けるべきなのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。