Next.js の `getServerSideProps()` の内部 API に `fetch()` を使用する必要がありますか?

getServerSideProps での内部 API の取得: SEO とベスト プラクティスのバランス

概要:

Next.js では、getServerSideProps() を使用してコンポーネント データをサーバーにロードできます。これにより、プロパティがサーバー側で取得および処理され、即時レンダリングが可能になるため、SEO に役立ちます。ただし、Next.js ドキュメントによると、 getServerSideProps() 内の内部 API ルートにアクセスするために fetch() を使用することは推奨されていません。この記事では、この推奨事項の背後にある理由を詳しく掘り下げ、SEO の互換性を維持する代替アプローチを検討します。

fetch() を使用して内部 API を直接呼び出すことは避けてください

fetch() は可能ですが、 getServerSideProps() 内の内部 API ルートからデータを取得するために使用しないことをお勧めします。 getServerSideProps() のサーバー側の性質により、追加の API リクエストを必要とせずにロジック、データベース、その他のリソースに直接アクセスできます。

getServerSideProps() での API ルート ロジックの再利用

これを解決するには、API ルートのフェッチ機能を別の関数に抽出することを検討してください。この関数は、API ルートと getServerSideProps() 内の両方で呼び出すことができ、不必要な API 呼び出しを回避しながらデータ取得ロジックの共有を可能にします。

例:

API ルート、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);
}

データ取得ロジックを getData() という関数に抽出できます:

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);
}

getServerSideProps() では、getData():

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

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

を利用できます。このアプローチを実装することで、Next で概説されている推奨データ取得方法を尊重しながら、getServerSideProps() の効率と SEO の利点を維持できます。 js.

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