하려했던 것
글 목록을 보여주는 메인페이지를 nextjs 이전버전의 getSeverSideProps처럼 server side에서 매번 데이터를 패칭해와 렌더링하려고 했다.
13버전에선 fetch에 'cache: no-store' 넣어주면 된다고 해서 넣었다.
문제 상황
그 결과, 데이터가 담긴 채로 html이 생성되는 server side rendering에 성공했으나, 새로고침 시 데이터가 갱신되지 않았다. ex) 방금 생성한 글이, 새로고침 해도 글목록에 반영이 안됨 😟
해결 방법
const dynamic = 'force-dynamic' 를 위에 붙여주기
구글링하다가 찾았다.
그리고 해당 내용은 NextJS의 docs에 Route Segment Config에 써져있다.
https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'
dynamic
레이아웃이나 페이지의 동적 동작을 완전히 정적이거나 완전히 동적으로 변경합니다.여기서 'force-dynamic' 을 사용하면, 동적 렌더링을 강제 적용하여 요청 시 각 사용자에 대해 경로가 렌더링되도록 한다고 한다. 이 옵션은 페이지 디렉토리의 getServerSideProps()와 동일하다고 적혀있다.
하지만 이 방법이 최선의 방법은 아닌듯 하다. 해당 설명 아래의 Good to know에
The new model in the app directory favors granular caching control at the fetch request level over the binary all-or-nothing model of getServerSideProps and getStaticProps at the page-level in the pages directory.
The dynamic option is a way to opt back in to the previous model as a convenience and provides a simpler migration path.이렇게 적혀있는데, 아무래도 저 옵션을 사용하면 getServerSideProps처럼 페이지 단위로 캐싱이 적용되나보다. 근데 app router는 page 단위가 아니라 컴포넌트 단위로 작동하려고 만든 것이니... (하지만 지금 프로젝트는 페이지 단위로 SSR 중이라 getServerSideProps를 쓰는거나 다름 없긴 하다) 더 좋은 방법이 있는지 찾아보긴 해야할 것 같다.
앞으로 고민할 점
'force-dynamic' 을 사용하지 않고 해당 문제를 해결하는 방법은 없는지 찾아보기.
