Next.js 16 App Router에서 parallel routes 간 state 공유 문제

Question

Next.js 16 App Router에서 parallel routes 간 state 공유 문제 문제로 질문드립니다.

Next.js App Router에서 아래와 같이 데이터를 가져오는데, 배포 후 데이터가 갱신되지 않습니다:

// app/posts/page.tsx
export default async function PostsPage() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()
  return 
}

개발 서버에서는 매번 최신 데이터인데, 프로덕션 빌드하면 빌드 시점 데이터가 계속 나옵니다.

김영삼 · Accepted Answer

Next.js App Router에서 fetch는 기본적으로 정적으로 캐시됩니다(버전에 따라 다름).해결 방법// 방법 1: 캐시 비활성화 const res = await fetch('https://api.example.com/posts', { cache: 'no-store' // 매 요청마다 fresh 데이터 }) // 방법 2: ISR (일정 시간마다 갱신) const res = await fetch('https://api.example.com/posts', { next: { revalidate: 60 } // 60초마다 재검증 }) // 방법 3: 라우트 세그먼트 레벨 export const revalidate = 60 // 페이지 전체에 적용블로그라면 revalidate: 3600(1시간), 실시간 데이터면 cache: 'no-store'를 권장합니다.

서버지기영호 · Answer

설정 한 줄 바꾸니 바로 됩니다!! 감사합니다!

댓글 2