정의되지 않은 데이터를 피하기 위해 Next.js 13에서 데이터를 효율적으로 가져오는 방법은 무엇입니까?

Next.js의 데이터 가져오기 장애: 정의되지 않은 데이터 해결

Next.js는 getStaticProps 및 getServerSideProps를 포함하여 서버측 데이터 가져오기를 위한 여러 가지 방법을 제공합니다. 그러나 이러한 방법은 주로 페이지 폴더 내의 페이지 구성 요소를 위한 것입니다. Next.js 13에서는 서버 구성 요소라는 새로운 개념이 등장하여 구성 요소 본체 내에서 직접 데이터를 가져올 수 있습니다.

서버 구성 요소: 포괄적인 솔루션

서버 구성 요소는 보다 유연한 접근 방식을 제공합니다. 데이터 가져오기를 통해 개발자는 다음 작업을 수행할 수 있습니다.

• getStaticProps와 유사하게 결과를 캐시하는 옵션을 사용하여 서버에서 데이터를 가져옵니다.
• getServerSideProps와 유사하게 각 요청에 대해 데이터를 가져옵니다.
• 사용자 정의 재검증 전략을 지정하세요.

서버 구성 요소를 활용하려면 구성 요소를 앱 디렉터리에 있는 파일의 기본 내보내기로 정의하세요. 다음 방법을 사용하여 구성 요소 본문 내에서 데이터 가져오기를 수행할 수 있습니다.

import { headers, cookies } from "next/headers";

export default async function Component({ params, searchParams }) {
  // Cached until manually invalidated
  const staticData = await fetch(`https://...`, { cache: "force-cache" });

  // Refetched on every request
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  // Revalidated with a 10-second lifetime
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });
}

대체 접근 방식

서버 구성 요소 외에도 라이브러리를 사용하여 데이터를 가져오거나 데이터베이스와 직접 상호 작용할 수도 있습니다. ORM을 사용합니다. 이러한 시나리오에서는 경로 세그먼트 구성을 활용할 수 있습니다.

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

import prisma from "./lib/prisma";

// Caching options
export const revalidate = 10; // Revalidate every 10s
// OR
export const dynamic = "force-dynamic"; // No caching

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

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

서버 구성 요소 또는 대체 접근 방식을 활용하면 Next.js의 서버에서 데이터를 효율적으로 가져올 수 있으며, 이를 통해 정의되지 않은 데이터에 의존할 때 발생하는 문제를 해결할 수 있습니다. getStaticProps에서만 가능합니다.

위 내용은 정의되지 않은 데이터를 피하기 위해 Next.js 13에서 데이터를 효율적으로 가져오는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!