Create로 게시물 추가 시, 컨텐츠가 생성이 되어 db.json이 수정될 것입니다.
URL로 잘 이동하는 것 또한 볼 수 있을텐데 웹페이지에는 추가가 되지 않았습니다.
이 문제는 Cache와 관련되어 있습니다.
layout.js를 봅시다.
const resp = await fetch("http://localhost:9999/topics");
const topics = await resp.json();fetch명령어는 서버에서 글 목록을 가져오는 코드입니다. 이 명령어를 사용하게 되면 Next.js는 기본적으로 한번 가져온 정보를 저장해둡니다. 그리고 그 정보는 .next 파일 에 저장되어 있을 것 입니다.
rm -rf .next 와 npm run dev 명령어를 통해 .next 파일을 삭제했다가 다시 설치하면서, 웹 페이지에는 글 목록이 갱신 되었으며, 터미널에서는 cache:MISS 와 같은 로그를 출력하게 됩니다.
이는 데이터가 한번도 access한 적 없거나 데이터가 유효하지 않아서 다시 가져왔다는 뜻입니다. json서버에서도 access한 흔적이 있습니다. 최초로 접속할 때 데이터를 가져왔고 저장했다는 것 입니다.
다시 리로드하면 cache : HIT 라는 로그를 볼 수 있는데, 이는 데이터를 사용했다는 뜻입니다.
어떻게 하면 이 문제를 해결할 수 있을까요?
글을 생성하고 서버컴포넌트를 refresh하기 전에 Layout.js에서 fetch로 인해 생긴 cache를 지우면 됩니다.
간단하게 해결하려면 Fetch를 이용해서 데이터를 가져온 후에 캐시로 만들지 않는 것입니다.
성능은 좀 나빠지겠지만 단순하겠지만 이렇게해서 해결해보겠습니다.
const resp = await fetch("http://localhost:9999/topics/", {
cache: "no-cache",
});이렇게 {cache: "no-cache",} 명령어를 추가함으로써 캐쉬를 사용하지 않게 되고 이제 layout.js의 Fetch는 렌더링 될 때마다 캐쉬를 사용하지 않고 fresh한 데이터를 가져오게 됩니다.
