인프런 커뮤니티 질문&답변
작성한 질문수
Vercel 배포된 사이트에서 캐시 비우기
해결된 질문
작성
·
1.5K
2
Vercel로 배포한 사이트에서 캐시 비우기가 잘 안되는거 같아요. Next.js 앱 단 외에 Vercel쪽에서도 캐싱이 되는건가요? 만약 그렇다면 "캐시 비우기" 버튼 구현을 어떻게 하면 될까요?
강의 너무 유익하고 잘 들었습니다 😊
답변 1
1
안녕하세요. 질문 남겨주시고 응원해주셔서 감사합니다!
정확한 답변을 드리기 위해 한 가지만 확인해보려고 해요.
혹시 말씀해주신 'Vercel로 배포한 사이트'가 직접 작성하신 코드를 배포한 사이트일까요? 아니면 제가 예시로 올려둔 사이트(https://weather-app-joeun.vercel.app/)를 말씀하셨던 걸까요?
직접 작성한 코드인 경우라면 제가 코드를 보면서 도움 드리면 좋을 것 같습니다. 작업 중이신 레포를 공유해주시거나 캐시 비우기 동작을 구현한 코드를 알려주실 수 있을까요?
혹시 제가 올려둔 예제도 동일한 증상을 보이고 있는 것이라면 재현 방식을 알려주시면 시도해보고 답변 드릴 수 있도록 하겠습니다!
질문 남겨주셨는데 한 번에 답변드리지 못해 죄송합니다.
위의 내용 알려주시면 확인해보고 정확한 답변 드릴 수 있도록 할게요! :)
답변 남겨주셔서 감사합니다! 해당 증상 저도 확인했습니다.
관련해서 알아보니 Router Cache가 동작해서 발생하는 문제로 보입니다.
개발 환경과 다르게 동작하는 것은 개발 환경에서 캐시가 정상 동작하지 않기 때문으로 보여요. 관련 문제에 대한 링크를 남겨두겠습니다. https://github.com/vercel/next.js/discussions/48481
Router Cache는 아래와 같은 3가지 방법으로 비울 수 있습니다.
useRouter(next/navigation)의 refresh 메서드를 호출하는 방법브라우저의 강력 새로 고침 기능을 이용하는 방법
Server Action을 이용해
revalidatePath,revalidateTag함수를 호출하는 방법
위의 방법 중 3번의 방법(Server Action)을 이용했을 때 즉시로 Data Cache와 Router Cache를 비울 수 있다고 합니다. 현재 저희가 사용하고 있는 방식은 Route Handler를 쓰는 방식이고 이는 Router Cache를 즉각적으로 비우진 못한다고 합니다. 관련된 내용 공식 문서에 나와있으니 참고해주시면 좋을 것 같아요! (공식 문서 - Caching: Data Cache and Client-side Router cache)
질문 남겨주신 덕분에 저도 공부가 많이 됐습니다. 정말 감사합니다.
또 다른 질문 사항 있으시면 언제든 편하게 남겨주세요!
직접 작성한 코드로 배포한 사이트와 예시 사이트 둘 다 같은 증상입니다. 다시 확인해보니 배포 사이트에서도 동작을 하네요! 하지만 develop 환경과 조금 차이가 있더라구요! 간단하게 표현하자면 새로고침을 한번 더 눌러줘야 화면이 갱신됩니다.
1. dev 환경
캐시 비우기 클릭 -> 페이지 새로고침 -> 화면 갱신
배포 환경
캐시 비우기 클릭 -> 페이지 새로고침 (갱신 X) -> 페이지 새로고침 -> 화면 갱신
중간에 어떤 이유로 이런 차이가 발생하는걸까요..!?