Next.js의 `getServerSideProps()`에서 내부 API에 `fetch()`를 사용해야 합니까?

getServerSideProps에서 내부 API 가져오기: SEO와 모범 사례의 균형

소개:

In Next.js에서는 getServerSideProps()를 사용하여 컴포넌트 데이터를 서버에 로드할 수 있습니다. 소품이 서버 측에서 검색 및 처리되어 즉각적인 렌더링이 가능하므로 SEO에 도움이 됩니다. 그러나 Next.js 문서에 따르면 fetch()를 사용하여 getServerSideProps() 내의 내부 API 경로에 액세스하는 것은 권장되지 않습니다. 이 기사에서는 이 권장 사항의 이유를 자세히 알아보고 SEO 호환성을 유지하는 대체 접근 방식을 살펴봅니다.

fetch()를 사용하여 내부 API를 직접 호출하지 마세요

fetch()는 가능하지만 getServerSideProps() 내의 내부 API 경로에서 데이터를 검색하는 데 사용하는 것이 좋습니다. getServerSideProps()의 서버 측 특성을 통해 추가 API 요청 없이 로직, 데이터베이스 및 기타 리소스에 직접 액세스할 수 있습니다.

getServerSideProps()에서 API 경로 로직 재사용

이를 극복하려면 API 경로의 가져오기 기능을 별도의 기능으로 추출하는 것이 좋습니다. 이 함수는 API 경로와 getServerSideProps() 내에서 모두 호출할 수 있으므로 불필요한 API 호출을 피하면서 데이터 가져오기 논리를 공유할 수 있습니다.

예:

API 경로인 페이지/api/사용자에 다음 코드가 포함되어 있다고 가정합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!