개발자

Next.js 13 Vercel로 배포 질문

2023년 07월 24일조회 754

안녕하세요 이전에 사용한적 없던 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 최신화된 사항을 그대로 반영시킬려면 어떻게 해야할까요??..

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 3

인기 답변

김병훈님의 프로필 사진

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

정재용님의 프로필 사진

안녕하세요. 관련 코드를 첨부해주시면 좀 더 명확하게 답변드릴 수 있을것 같은데요. 아마 말씀해주신 현상으로 봤을때는, 요청 시점이 아닌, 빌드 시점에 사전 렌더링(Static Generation)이 된게 아닌가 싶습니다. 요청 시점에 실시간 데이터를 조회하고 싶으시다면, SSR을 통해 데이터를 가져와야 합니다. 관련 내용은 이 공식 문서(https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering)를 참고해보시면 좋을것 같습니다. 그 밖에 next.js SSR SSG를 키워드로 검색하시면 관련 포스트들을 확인 하실 수 있을것 같아요. 한번 확인해보시고, 관련 내용이 원인이 아니라면 다시 알려주세요~

정기윤님의 프로필 사진

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

정기윤님의 프로필 사진

정기윤

원아이티아카데미 웹개발1월 10일

vercel에서 해당 페이지가 ssr임에도불구하고 ssg로 렌더링되어서 발생한거 같아요 저는 ssr인 페이지에서 export const dynamic = "force-dynamic"; 이걸 선언하니까 해결되었네요 npm run build 하셔서 data fetch하는 컴포넌트가 ssr로 되는지 ssg인지 확인해보시는게 좋을거같아요 저는 아래 링크에서 문제점을 해결했네요! https://stackoverflow.com/questions/76356803/data-not-updating-when-deployed-nextjs13-app-on-vercel-despite-using-cache-no

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!