Next.js 13 Vercel로 배포 질문

Question

안녕하세요 이전에 사용한적 없던 Next.js를 이참에 13 버전이 나온 김에 공부를 하고 있습니다

DB의 경우 PlanetScale와 Prisma를 사용하여 같이 사용하고 있습니다

Vercel을 통해 Next.js를 배포한 상태이구요.

혼자 개발 공부용으로 하고있다보니 일단 배포DB와 개발 DB는 동일한걸 사용중입니다

npm run dev로 localhost를 접속하면 DB에 수정된 사항이 새로고침하면 바로 반영이 됩니다
(예시 : DB에 데이터가 4개가 있다가 > 6개로 변경) 하면 바로 반영이 됩니다

그러나 Vercel를 통해 배포한 페이지의 경우 동일한 DB를 사용하고 있으나 
변경사항이 즉각 반영이 되지 않습니다, 항상 재 배포를 해야 그때 기준 최신화된 데이터를 가져옵니다

(예시 : DB에 배포 직전까지 데이터가 6개가 있다가 > 배포 후 4개로 변경 > 동일 DB 사용하니 당연히 이거도 반영이 되겠지? > 예상과 달리 데이터가 6개 그대로인 상황이 발생)

배포 버전에서도 DB 최신화된 사항을 그대로 반영시킬려면 어떻게 해야할까요??..

김병훈 · Accepted Answer

저도 사이드프로젝트를 하다가 똑같은 현상을 겪어서, 아주 공감이 되는 질문이네요 ㅎㅎ

12에서 13으로 넘어가며, 서버 컴포넌트 개념이 추가되고 서버 컴포넌트의 경우 배포 시 정적으로 페이지가 만들어져 빌드 시점에서의 데이터를 기준으로 페이지들이 구성되는데요.
https://nextjs.org/docs/app/building-your-application/deploying/static-exports#server-components

이를 해결하기 위해서는 클라이언트 컴포넌트로 만들어 렌더링 시점에 데이터를 가져오는 CSR 또는 서버 컴포넌트 그대로 유지한 상태에서 어느 시점에 기반 데이터를 업데이트 할지 설정해주는 ISR 방식 이렇게 두가지가 있을 것 같아요.

(ISR 방식은 저도 아직 적용은 안해봤지만)
서버 컴포넌트의 데이터를 재확인하여, 페이지를 업데이트해주는 ISR(Incremental Static Regeneration) 방식은 공식 문서를 참고해서 적용해보실 수 있을 것 같습니다.
https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating

정재용 · Answer

안녕하세요.

관련 코드를 첨부해주시면 좀 더 명확하게 답변드릴 수 있을것 같은데요. 아마 말씀해주신 현상으로 봤을때는, 요청 시점이 아닌, 빌드 시점에 사전 렌더링(Static Generation)이 된게 아닌가 싶습니다.
요청 시점에 실시간 데이터를 조회하고 싶으시다면, SSR을 통해 데이터를 가져와야 합니다.

관련 내용은 이 공식 문서(https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering)를 참고해보시면 좋을것 같습니다.
그 밖에 next.js SSR SSG를 키워드로 검색하시면 관련 포스트들을 확인 하실 수 있을것 같아요.

한번 확인해보시고, 관련 내용이 원인이 아니라면 다시 알려주세요~

정기윤 · Answer

저도 mongoDB 연결해서 Vercel에 배포했는데 동일한 에러가 발생하는데 혹시 어떻게 해결하셨나요?? 저는 이상하게 guest계정의 DB는 바로 반영이되는데, Admin 계정은 반영이안되네요...