getServerSideProps()에서 내부 API에 대한 가져오기 사용을 피해야 하는 이유는 무엇입니까?

Next.js에서 getServerSideProps를 사용한 내부 API 가져오기

Next.js를 처음 접하는 사용자는 페이지 간 또는 페이지 간 데이터 가져오기를 처리할 때 종종 딜레마에 직면합니다. 구성 요소. 예를 들어 getServerSideProps()를 사용하여 사용자 데이터를 반환하는 내부 API를 가져오는 경우 이 접근 방식이 SEO 목적에 이상적이라고 생각하는 것은 당연합니다. 그러나 Next.js 문서에서는 getServerSideProps() 내에서 API 경로를 호출하기 위해 fetch()를 사용하지 말 것을 권장합니다.

getServerSideProps()에서 API 경로 가져오기를 피하는 이유는 무엇입니까?

getServerSideProps() 및 API 경로가 모두 서버에서 실행되므로 getServerSideProps() 내에서 fetch()를 사용하여 내부 API 경로를 호출하는 것은 불필요합니다. 이 추가 요청은 비효율적이며 추가적인 이점을 제공하지 않습니다.

권장 방법

getServerSideProps()에서 내부 API를 호출하는 대신 로직을 다음에서 직접 가져와야 합니다. API 경로. 이를 통해 getServerSideProps()는 불필요한 API 호출을 도입하지 않고 데이터베이스, 파일 시스템 또는 기타 리소스와 직접 상호 작용할 수 있습니다.

리팩터 예시

가져오기에 사용되는 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);
}

이 논리는 API 경로와 getServerSideProps() 모두에서 사용할 수 있는 별도의 함수로 추출될 수 있습니다.

// pages/api/user
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() 함수:

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

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

이 지침을 따르면 개발자는 SEO 이점을 유지하면서 Next.js 애플리케이션의 성능과 효율성을 향상시킬 수 있습니다.

위 내용은 getServerSideProps()에서 내부 API에 대한 가져오기 사용을 피해야 하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!