[Next.js] SSG(Static Site Generation) 렌더링 시 DB 변동사항 적용위해 Cache 비우기

Next.js 과제를 하며 SSG 렌더링으로 About 페이지를 만들어야 했다. (회사 소개 페이지)

 

그런데 테스트를 위해 npm run dev (yarn dev) 로 로컬 서버를 통해 확인하다가,

DB 데이터 (json-server 의 db.json) 를 변경했는데

(과제에선 json-server 를 활용 - 원래 BaaS이지만 이 과제에선 임의로 DB로 삼아서 쓰고있다)

변경된 데이터가 반영되지 않았다 .. 😥

이는 SSG 렌더링 특성 상 force-cache 로 캐시가 저장되어 유지되기 때문인데, 간단히 캐시 파일 삭제하는 법을 알아보자.

 

---

저번 글에서도 정리했지만, SSG를 다시 설명해보자면 

🪨 SSG (Static Site Generation)    웹 렌더링 방식은

빌드 타임때 미리 페이지를 렌더링 해두어서 (빌드 때 컴포넌트 생성),
브라우저에서 요청 시 만들어둔 페이지를 제공하는 방식이다.

그래서 static 정적 방식이라고 하며, 이후 데이터를 변경하고 새로고침을 해도 동일한 페이지만 출력된다. 
(한번 fetch한 데이터는 변치 않음)
(바꾸려면 빌드를 다시 해야)

그렇기 때문에 '회사 소개 페이지'와 같이 가져오는 데이터 내용이 변할 일 없는 페이지에 적절하다.
(React에서 썼던 CSR-Client Side Rendering 방식보다 SEO에도 유리하고, TTV(time to view)도 짧다는 장점이 있다)

Next.js에서 어떤 설정도 하지 않으면, 기본적으로 SSG로 동작하게 되어있다.
(혹은 데이터 fetch 시 cache: "force-cache" 라는 옵션을 주는 것과도 동일하다)

 

 

 

🤔 하지만 SSG 페이지를 테스트할 때에도 캐싱돼서 데이터 변경 반영안됨..

 

근데 앞서 말했듯, 이 SSG 페이지 ..

빌드하기도 전에   npm run dev 나 yarn dev 로 페이지 서버를 테스트할 때에도

cache 를 저장하기 때문에 변경된 데이터가 반영되지 않는다.... 🥲

서버를 껐다 켜도 반영되지 않는 것은 마찬가지..

 

테스트 도중에 얼마든지 DB 데이터를 변경할 수 있을텐데.. 이를 반영하려면 어떻게 해야 될까?!

 >> 💡 저장된 캐시를 비워줘야 한다 !! 🪄

 

 

🪹 저장된 캐시 비우기

next.js 프로젝트의 폴더를 보면, 루트경로에 .next 폴더가 있다.

그 안에는 cache -> fetch-cache 폴더가 있고 ->  그 안에 긴 문자열('40afb....'와 같은) 이름의 파일이 있다. 

 

해당 파일을 열어보면 캐시 내용이 객체형태로 저장되어 있는 걸 알 수 있다.

(알아보니, 로컬 개발 환경에서 캐시는 .next/cache/fetch-cache 폴더에 정적 파일로 생성된다고 한다)

 

"date" 는 캐시 저장된 시간을 알려주고,

그 외에도 내가 fetch 로 어떤 url에 요청보냈는지나, 어떤 메서드가 가능한지까지도 (GET, PATCH,..) 써 있다.

{"kind":"FETCH","data":{"headers":{"access-control-allow-headers":"content-type",
"access-control-allow-methods":"GET, HEAD, PUT, PATCH, POST, DELETE","access-control-allow-
origin":"*","connection":"keep-alive","content-length":"111","content-type":"application/json",
"date":"Wed, 13 Mar 2024 12:44:00 GMT","keep-alive":"timeout=5","x-powered-by":"tinyhttp"},
"body":".....생략","status":200,"url":"http://localhost:4000/companyInfo"},"revalidate":
31536000,"tags":[]}

 

여튼, 이 캐시 파일을 지워주면 된다. 나는 아직 fetch 요청을 한 페이지에서만 한번 쓴거라 다른 캐시파일은 없었는데

다른 캐시파일이 있다면 잘 구분해서 데이터갱신을 원하는 fetch요청에 대한 캐시파일만 지우면 될 거 같다.

(우선 url 로 구분해서..)

 

내 경우 이런 캐시 파일이 2개가 있었는데, 같은 요청에 대한 것이었다.

그래서 하나만 지워서는 안되고, 2개 다 지워줬더니 캐시가 완전히 사라지면서

다시 yarn dev 로 서버를 돌렸을 때 데이터가 갱신되었다. (동시에 새로운 캐시파일 생성)

이후 다시 캐시파일을 지우기 전까지는 가져온 데이터는 변동없이 유지된다.

 

 

(더 편리한 방법이 있는지는 잘 모르겠다 ㅠ_ㅠ 나는 stackoverflow 사이트의 2023년 답글을 보고 해결했다.)