프로젝트를 진행하면서 중요 컨텐츠 부분을 React Query를 사용한 SSR 구현으로 처리해서 초기 로딩 속도를 줄이고 SEO에 유리하도록 만들었다.
하지만 SSR로 바꾸게 되면서 알아챈 문제점이 하나 있었다.
페이지가 새로고침 될 때마다 서버에서 미리 렌더링 된 페이지가 먼저 보여지게 되는데, 이때의 데이터가 첫 서버 렌더링 시의 데이터 즉, 업데이트 되지 않은 예전의 데이터로 보여졌다.
SSG 방식과 같이 정적 페이지를 초기 캐시된 데이터를 가져오고 있었던 것이다.
이러한 현상을 해결하기 위해 Next.js의 revalidate 옵션을 사용하기로 했다.
revalidate의 값을 0으로 설정하여 새로운 요청이 있을 때마다 매번 데이터를 새로 불러오게 설정해주었다.
이로써 매번 서버에서 업데이트 된 데이터를 받아와 SSR을 사용할 수 있게 되었다.
