서버 구성 요소 및 그 이상을 사용하여 Next.js에서 서버 측 데이터를 가져오는 방법은 무엇입니까?

getStaticProps 및 그 이상을 사용한 Next.js 서버 측 데이터 가져오기

문제:
다음에서 Django Rest Framework를 활용하는 .js 애플리케이션, REST API에서 데이터를 가져오면 정의되지 않은 값이 발생하고 데이터를 매핑할 때 런타임 오류가 발생합니다.

설명:
getStaticProps와 같은 Next.js 메소드는 서버 측 데이터 검색을 위해 특별히 설계되었으며 페이지 디렉토리 내에서만 효과적으로 작동합니다. 그러나 최신 버전의 Next.js에서는 앱 디렉터리 내에 있는 서버 구성 요소 내에서 직접 데이터를 가져올 수 있습니다.

해결 방법:
이 문제를 해결하고 서버를 수행하려면- 최신 Next.js에서 사이드 데이터를 가져오려면 다음 옵션을 고려하세요.

서버 사용 구성 요소:

• 코드 조각에서 볼 수 있듯이 구성 요소 본문 내에서 서버측 데이터 가져오기를 구현합니다.
• 이 접근 방식을 사용하면 데이터 검색을 위해 헤더와 쿠키에 직접 액세스할 수 있습니다. .

경로 세그먼트 구성 사용(데이터베이스용) 상호 작용):

• 원하는 수명(예: 10초)으로 데이터를 캐시하도록 경로 세그먼트를 구성하거나 캐싱을 모두 비활성화합니다.
• 이 방법을 사용하면 데이터 가져오기 및 다음을 사용하여 데이터베이스와의 직접적인 상호 작용을 포함한 캐싱 전략 ORM.

코드 조각(서버 구성 요소):

// page.js
export default async function Page() {
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  return "...";
}

코드 조각(경로 세그먼트 구성):

// layout.js OR page.js OR route.js
export const revalidate = 10;

// ...
async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

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

이러한 솔루션을 구현하면 서버 구성 요소로 작업할 때에도 서버에서 데이터를 효과적으로 가져오고 Next.js 내에서 캐싱 전략을 처리할 수 있습니다.

위 내용은 서버 구성 요소 및 그 이상을 사용하여 Next.js에서 서버 측 데이터를 가져오는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!