Next.js 13 이상에서 서버측 데이터를 어떻게 가져오나요?

Next.js에서 서버측 데이터 가져오기

Next.js 13 이상에서 서버측 데이터 가져오기

최신 버전의 Next.js에서는 "getStaticProps" 및 "getServerSideProps" 메소드가 단계적으로 폐지되어 개발자들이 최신 Next.js 애플리케이션에서 서버측 데이터를 가져오는 방법을 궁금해하게 되었습니다.

서버 소개 구성 요소

Next.js 13 이상에서는 서버 구성 요소가 도입되어 서버 측에서 데이터를 가져오는 새로운 방법을 제공합니다. 기존 페이지 구성 요소와 달리 서버 구성 요소는 구성 요소 본문 내의 데이터 가져오기 논리에 직접 액세스할 수 있습니다.

서버 구성 요소의 예

다음 코드 조각은 데이터를 가져오는 방법을 보여줍니다. 서버 구성 요소 내의 서버 측:

export default async function Component() {
  // Fetch server-side data with caching options
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });

  return "...";
}

경로 세그먼트 구성

서버 구성 요소 외에도 Next.js는 경로 세그먼트 구성을 제공합니다. 이를 통해 개발자는 서버 측 데이터를 가져오는 동안에도 특정 경로나 페이지에 대한 캐싱 동작을 제어할 수 있습니다.

경로 세그먼트 구성의 예

이 예는 구성 방법을 보여줍니다. 경로 세그먼트 구성을 사용한 경로별 캐싱:

// layout.js OR page.js OR route.js ??

export const revalidate = 10; // Revalidate every 10s
// ...

export default async function Page() {
  const posts = await getPosts();
  // ...
}

위 내용은 Next.js 13 이상에서 서버측 데이터를 어떻게 가져오나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!