Next.js App Router에서 인증 처리 방법 질문

Question

Next.js App Router에서 인증 처리 방법 질문 문제로 질문드립니다.

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

저도 최근에 v5로 마이그레이션했는데, auth() 함수 하나로 Server Component에서 바로 세션 가져올 수 있어서 훨씬 깔끔해졌어요. 다만 edge runtime 관련 이슈가 좀 있어서 Prisma adapter 쓰시면 주의하세요.

코딩하는민수 · Answer

두 분 다 감사합니다. middleware + Server Component 이중 체크 구조로 가겠습니다. v5 마이그레이션 가이드가 공식 문서에 잘 나와 있나요?

김영삼 · Answer

공식 마이그레이션 가이드가 있긴 한데 아직 완벽하진 않습니다. https://authjs.dev/getting-started/migrating-to-v5 여기 참고하시고, 특히 `auth.ts` 파일 구조가 완전히 바뀌니 거기 집중하세요. Prisma adapter는 @auth/prisma-adapter 패키지를 별도로 설치해야 합니다.

코딩하는민수 · Answer

마이그레이션 완료했습니다! 확실히 코드가 깔끔해졌네요. 답변 덕분에 삽질 없이 잘 끝냈습니다. 감사합니다!

댓글 5