인프런 커뮤니티 질문&답변
작성한 질문수
fetch 캐싱과 revalidate 관련
작성
·
47
0
안녕하세요 제로초님 fetch 캐싱과 revalidate 관련해서 궁금한 점이 있어 질문드립니다.
await fetch('https://api.example.com/posts', {
next: { revalidate: 60 },
});A가 /posts를 최초 요청합니다.
→ API에서 데이터를 받아오고, 해당 데이터는 Next.js 서버 캐시에 저장
이후 60초 동안은 다른 누구든지 이 캐시된 데이터를 그대로 받음
그런데 60초가 지나기 전에 DB에서 게시글 1번의 제목이나 내용이 수정됨
60초가 지나고 A가 다시 목록을 요청
→ 이 시점은 revalidate 만료 시점 이후이므로 재검증 타이밍
→ 하지만 A는 여전히 이전 캐시 데이터를 먼저 받고,
→ A의 요청을 계기로 Next.js가 백그라운드에서 API를 다시 fetch하여 캐시를 갱신
곧이어 B가 /posts를 요청하면
→ B는 A 덕분에 갱신된 최신 데이터를 바로 받음
제가 이해한 것이 맞을까요?
만약 저런식으로 동작하면 상세 페이지와 데이터 불일치 문제가 발생할 수 있지 않을까 해서요
만약 상세 페이지 요청도 이렇게 작성되어 있다면
await fetch('https://api.example.com/posts/1', {
next: { revalidate: 60 },
});A는 목록 요청만 했고, 상세 페이지는 요청하지 않음
B는 A 이후에 목록을 보고 → 최신 제목을 확인한 뒤,
→ 게시글 1번의 상세 페이지를 클릭
그런데 상세 페이지의 제목은 여전히 수정 전의 이전 제목으로 보임
→ 목록과 상세 페이지 간에 데이터가 불일치할 수 있음
정리하자면
제가 이해한 Next.js의 fetch + revalidate 캐시 동작이 맞는지 궁금하고
위와 같은 목록-상세의 데이터 불일치 현상은 실제로 발생 가능한 문제인지 궁금합니다.
제가 실제로 테스트해봤을 때 위 시나리오대로 목록과 상세 페이지에서 서로 다른 제목이 보이는 걸 확인했습니다.
혹시 제가 잘못 이해하고 테스트한 부분이 있는 건지, 아니면 실제로도 발생할 수 있는 동작인지 궁금합니다.
답변 2
0
안녕하세요, 인프런 AI 인턴입니다. 찹찹이님!
Next.js에서 제공하는 데이터 캐싱 및 revalidate 메커니즘에 대한 질문을 주셨군요. 작성하신 시나리오는 시스템이 어떻게 동작하는지 이해하는 데 있어 중요한 개념을 포함하고 있습니다.
캐시와 Revalidate의 동작 방식
초기 요청과 캐시: 초기 요청 시에는 API로부터 데이터를 받아와 Next.js 서버 캐시에 저장합니다. 이 범위 내에서는 설정된 revalidate 시간 동안 동일한 데이터를 모든 사용자에게 제공합니다.
Revalidate 이후의 재검증:
- 설정된 시간(예: 60초)이 경과하면 서버는 “백그라운드에서” 데이터를 갱신할 준비를 합니다.
- 이때, 이미 캐시에 있던 데이터를 즉시 반환하지만, 백그라운드에서 다시 데이터를 페치하여 캐시를 갱신합니다.
- 설정된 시간(예: 60초)이 경과하면 서버는 “백그라운드에서” 데이터를 갱신할 준비를 합니다.
백그라운드 갱신: 재검증 타이밍 시의 첫 요청 후, 캐시가 갱신되기 전에 해당 요청을 먼저 받은 사용자는 갱신 이전의 데이터를 받게 됩니다.
데이터 불일치 가능성: 목록 페이지는 업데이트된 데이터를 보여주지만, 상세 페이지의 캐시는 이전 상태일 수 있습니다. 이는 개별 페이지 캐시가 독립적으로 동작하기 때문에 가능한 상황입니다.
데이터 불일치에 대한 해결책
이런 종류의 데이터 불일치를 해결하려면:
- 동기화 전략 조정: 데이터 일관성을 높이기 위해서는 특정 사용자 케이스에서
revalidate를 더 짧게 설정하거나, 클라이언트 측 데이터 페칭 도구(예: React Query)와 같은 대체 데이터 관리 전략을 고려해볼 수 있습니다.
- 늘 최신 정보를 제공해야 하는 경우라면
revalidate주기를 짧게 조정하는 것이 필요합니다.
이와 관련된 사항을 더 깊이 이해하기 위해 아래 링크를 참고하실 수 있습니다:
- React Query와 Next.js의 캐시 관리 차이
- ISR 테스트 중 궁금점
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
아하 실제로 그런 문제가 있군요! 긴글 읽어주셔서 감사합니다.
그러면 위의 내용처럼 revalidate 를 적용할 경우, 캐시 시간 조절을 어떻게 해야하는건가요??
캐시 시간을 아무리 잘 조절해도,
상세 페이지에 아무도 접근을 하지 않으면, 제가 예상한 시나리오에서
B 입장에서는 목록과 상세 데이터 불일치는 계속 일어날 수 있는 문제일텐데.. 이런거 실무에서는 어떤식으로 풀어나가는지 궁금합니다ㅜㅜ
제가 이런 불일치 문제 때문에 개인 프로젝트에 어쩔 수 없이 no cache 로 하고있습니다.
혹시 실무에서는 어떤 전략으로 이런 문제를 풀어나가는지 팁.. 있을까요??
추가로,, tanstack query 를 사용해도 발생할 수 있겠네요
목록이랑 상세가 staleTime 이 같은경우
사용자가 목록 먼저 조회하고, 상세는 한참 있다가 조회했으면
목록먼저 staleTime 이 지날테니까 목록만 먼저 데이터 업데이트가 일어날 것 같습니다.
tanstack query 도 어떠한 전략으로 이러한 문제를 풀어나가는지 궁금합니다.
감사합니다!