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에만 의존할 때 발생하는 정의되지 않은 데이터 문제를 해결할 수 있습니다.