🚀 Nextjs15 App Router 시작하기 2

🔄 데이터 페칭

Next.js 15에서는 페이지 컴포넌트에서 async 키워드를 사용해 서버에서만 실행되는 데이터 페칭을 할 수 있어요.

// app/page.tsx
export default async function HomePage() {
  const data = await fetchData();
 
  return <div>{data}</div>;
}

이전 버전에서는 페이지 컴포넌트를 비동기 함수로 사용 시 문제가 생길 수 있었지만, 이제는 서버 컴포넌트로 동작하기 때문에 async와 await를 활용한 데이터 페칭이 훨씬 간편해졌어요!

💾 데이터 캐시

데이터를 효율적으로 관리하기 위해 캐싱은 정말 중요합니다!

// 요청 결과를 캐싱하지 않아요.
const response = await fetch(API_URL, { cache: "no-store" });
 
// 요청 결과를 무조건 캐싱해요.
const response = await fetch(API_URL, { cache: "force-cache" });
 
// 요청 결과를 10초마다 갱신해요.
const response = await fetch(API_URL, { next: { revalidate: 10 } });
 
// 태그 기반 캐싱을 설정하고, 이후 revalidateTag()로 해당 태그의 캐시를 갱신할 수 있어요.
const response = await fetch(API_URL, { next: { tags: ["a"] } });

⚡ 요청 메모이제이션

중복된 API 요청을 하나로 최적화해주는 기능이에요. 페이지 내에서 동일한 요청이 여러 번 발생하더라도 한 번만 처리되도록 도와줘요.

주의 사항

렌더링이 끝나면 캐시가 사라지므로, 데이터 캐시와는 다른 개념이에요!

🗂️ 풀 라우트 캐시

서버에서 특정 페이지의 렌더링 결과를 캐싱하는 기능으로, 빌드 시점에 미리 렌더링하여 빠른 응답을 제공해요. 정적 페이지 생성과 비슷한 개념으로 revalidate를 통해 주기적으로 갱신할 수 있어요.

🔀 동적 페이지와 정적 페이지

동적 페이지

데이터가 자주 변경되거나, 요청마다 다른 결과를 보여줘야 할 때 사용해요. 예를 들어, 사용자별 대시보드나 실시간 데이터가 필요한 페이지가 이에 해당합니다!

정적 페이지

데이터 변경이 거의 없고, 모든 사용자에게 동일한 내용을 보여줄 때 사용해요. 블로그 포스트나 상세 페이지가 이에 해당하며, generateStaticParams 함수를 사용해 빌드 시점에 정적 페이지를 생성할 수 있어요.

정적 파라미터 생성

export async function generateStaticParams() {
  const posts = await fetchPosts();
  return posts.map((post) => ({ id: post.id.toString() }));
}