13. cache

create에서 create하게 되면 content가 생성이 돼서 db.json에 데이터가 추가되고 URL 과 내용이 잘 변경된다.

그런데 글 목록에 content가 추가되지 않았다. 이는 캐시와 관련이 있다.

 

서버에서 글 목록을 가져오는 코드에서 fetch 명령어를 사용하게 되면 Next.js는 우리가 한 번 가져온 정보를 .next 폴더에 저장해둔다. reload를 해도 통신이 이루어지지 않고 있다.  cache 가 HIT 이기 때문이다.

이 문제를 해결하기 위해서 글을 생성하고 서버 컴포넌트를 refresh하기 전에 layout.js에서  fetch로 인해서 만들어진 캐시를 지워야 한다.

 

📍 Revalidating Data

캐시된 데이터를 일정 시간 간격으로 재검증하려면 fetch()에서 next.revalidate 옵션을 사용하여 리소스의 캐시 수명을 설정할 수 있다.

{ next: { revalidate : 10 } } 10초동안 캐시 유지, 10초가 지나면 그 캐시는 다시 만들어진다.

이렇게 하면 글을 생성하고 페이지로 redirection했을 때 바로 캐시가 업데이트 되지 않기 때문에

10이 아닌 0으로 사용하면 캐시 사용하지 않는다.

참고: 재검증 또는 캐시를 통해 가져오기 수준에서 캐싱: 'force-cache'는 요청 간에 데이터를 공유 캐시에 저장한다. 사용자별 데이터(예: cookie() 또는 헤더()에서 데이터를 파생하는 요청)에 사용하지 말 것.

 

📍 Dynamic Data Fetching

매 fetch 요청마다 fresh한 데이터를 fetch 하기위해서 cache:'no-store' 옵션을 사용하라.

---

🔔 수업내에서 갑자기 등장한 router.refresh()는 서버 컴포넌트를 강제로 다시 랜더링 하도록 하는 기능입니다. 이 함수를 호출하지 않으면 서버의 데이터를 변경했음에도 서버 컴포넌트가 그대로 입니다.