캐시를 갱신했는데 다른 페이지에 갔다 돌아오니 이전 데이터가 보이는 경우가 있다. 갱신 요청은 보냈는데 화면에서는 그대로라면 어디부터 확인해야 할까.
10월 7일 공개된 Next.js 16.4.0에 이 상황과 관련된 수정이 들어왔다. 캐시를 사용하는 프로젝트라면 확인해볼 만한 부분이라 정리해본다.
1. 재검증 이후에도 남아 있던 데이터
릴리스에 재검증을 했는데도 페이지 이동 후 오래된 데이터가 표시되는 문제를 수정한 항목이 있다. 관련 변경은 #95439이다.
데이터를 변경하는 부분만 확인하면 놓치기 쉬운 흐름이다. 목록에서 값을 수정하고 상세 페이지로 이동한 뒤, 다시 목록에 돌아오는 식으로 실제 화면 이동까지 묶어서 확인해보면 좋겠다.
2. 개발 환경의 use cache 무효화
use cache를 사용하는 개발 환경에서 캐시가 과하게 무효화되거나, 반대로 충분히 무효화되지 않는 문제도 수정됐다. 관련 변경은 #96235이다.
캐시가 남아 있어야 할 때 사라지는 것과 갱신되어야 할 때 남아 있는 것은 서로 다른 문제다. 이번 항목은 개발 환경을 대상으로 한 수정이므로 운영 환경의 동작까지 같다고 생각하면 안 된다.
3. 한 요청 안에서 캐시 재사용
완료된 캐시 항목을 같은 요청의 나머지 구간에서 재사용하는 변경(#96727)과, 소비자를 기준으로 포그라운드 재검증을 판단하는 변경(#96731)도 들어갔다.
변경 제목만으로 성능이 얼마나 달라졌는지까지 알 수는 없다. 다만 캐시 갱신뿐 아니라 데이터를 읽는 쪽의 동작도 함께 바뀌었다는 점은 체크해둘 만하다.
업데이트할 때 확인할 것
- 데이터를 수정하고 재검증한 뒤, 화면을 이동해도 새 값이 유지되는지
- 개발 모드에서
use cache가 적용된 데이터가 의도한 시점에 갱신되는지 - 같은 요청에서 캐시 데이터를 여러 번 읽는 흐름이 기존과 동일하게 동작하는지
위 항목은 변경사항을 바탕으로 잡아본 점검 순서이다. 모든 캐시 문제의 해결책은 아니지만, 비슷한 증상이 있던 프로젝트라면 해당 수정부터 확인해보면 좋겠다.
참고한 원문
'NextJS' 카테고리의 다른 글
| NextJS & Prisma 데이터 모델 설정 (유저 삭제 시 토큰 삭제하기) (0) | 2024.03.07 |
|---|---|
| [NextJS] NextJS에서 Link Component 사용하기 (0) | 2023.04.09 |