[Next.js] 브라우저 캐싱 문제 해결 방법

next.config에 generateBuildId를 추가한다

// next.config.js
module.exports = {
  generateBuildId: async () => {
    return new Date().toISOString();
  },
};

 

1. 프로젝트를 빌드할 때, 빌드 날짜와 시간을 기반으로 새로운 build ID가 생성된다.
2. 새로 업데이트된 웹앱을 배포할 때, Next.js에 의해서 이 새로운 build ID가 에셋들(eg. JS, CSS 파일 등의 URL)에 사용된다.
3. 유저가 웹사이트를 방문하면, 유저의 브라우저가 에셋 URL의 일부로써 새로운 build ID를 전달받게 된다. 이 브라우저는 새로운 build ID와 함께 에셋들을 받게 된다.
4. 미래에 웹앱이 업데이트되면, 새로운 build ID가 생성된다. 그리고 이 새로운 친구가 에셋 URL에 사용된다.
5. 이전 버전 웹앱과 함께 전달받은 build ID를 브라우저에 간직하고 있던 유저가 웹앱이 새로 업데이트된 다음 다시 방문을 할 경우, 그 브라우저는 새로운 build ID를 보고 놀라움을 느끼며 이 새로운 친구를 사용해 에셋을 다시 가져오려고 한다.
6. 즉, 이를 통해 브라우저 캐싱이 된 상태이더라도, 새로운 build ID와 함께 웹앱이 업데이트 되었을 때 유저의 브라우저는 이를 인식하고 새로운 에셋들을 가져와 영원히 행복하게 산다.