캐시 관련 질문사항이 있습니다!

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

React Query 캐시

작성

안녕하세요! 캐시관련 질문 사항이 있습니다!

현재, 강의 내용에선, react query를 사용한 클라이언트측 캐시와, unstable_cached 를 사용한 서버 캐시를 둘다 같은 하나의 데이터에 적용하신 모습을 확인하였습니다.

궁금증은, 현재 블로그 목록 조회는 두개 캐시 기법이 모두 적용되어 있는데, 둘 중 하나만 캐시를 해 놓아도 될 것 같다 라는 생각이 드는데, 이게 맞는지 궁금합니다.

혹시, 하나만 선택해야 된다면 이번 블로그 목록 케이스에서는 어떤 방식의 캐시를 적용하시는걸 추천하시나요?

react 블로그 next.js cursor cursorai

답변 2

짐코딩

지식공유자

안녕하세요~! 🙂

React Query는 클라이언트 측 캐싱으로, 브라우저 메모리에 데이터를 저장합니다. 사용자가 페이지를 이동하더라도 다시 같은 페이지로 돌아올 때 서버에 다시 요청하지 않고 캐시된 데이터를 보여줄 수 있습니다.

unstable_cached는 Next.js의 서버 사이드 캐싱 기능으로, 서버 메모리에 데이터를 저장합니다. 여러 사용자의 요청이 서버에 들어올 때 매번 데이터베이스 쿼리를 실행하지 않고 캐시된 결과를 재사용할 수 있습니다.

이처럼 캐시는 어떠한 상황에서 사용하느냐에 따라 달라질 수 있습니다.

블로그 목록 케이스에서

만약 하나만 선택해야 한다면, 블로그 목록 조회 같은 경우에는 용도에 따라 달라질 수 있습니다:

unstable_cached 선택 시:
- 장점: 모든 사용자가 빠른 응답을 받습니다(첫 방문자 포함).
- 적합한 경우: 트래픽이 많고, 데이터가 자주 변경되지 않으며, SEO가 중요한 경우
React Query 선택 시:
- 장점: 사용자 경험이 매끄럽고, 페이지 간 전환이 빠릅니다.
- 적합한 경우: 사용자 상호작용이 많고, 데이터가 자주 변경되는 경우

개인적으로는 블로그 목록과 같이 여러 사용자가 접근하는 공통 데이터의 경우, unstable_cached를 우선 적용하는 것이 서버 자원을 효율적으로 사용하는 방법이라고 생각합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. BeakGwa님.

캐시 관련 질문을 해주셨네요. React Query와 unstable_cached를 동시에 사용하는 경우와 그에 대한 선택 기준에 대한 것 같습니다. 두 가지 캐싱 기법을 모두 적용한 사례를 설명드리겠습니다.

캐시 기법 비교

React Query:
- 클라이언트 측 캐싱: 클라이언트에서 데이터를 캐시하여 서버 요청을 줄일 수 있습니다.
- 주로 클라이언트 인터랙션이 빈번한 경우에 유리: 사용자의 활동에 긍정적인 반응을 즉시 보여줄 수 있습니다.
- 적용이 쉬운 편: 간단한 설정으로 훌륭한 데이터 페칭 및 캐싱을 제공합니다.
unstable_cached:
- 서버 측 캐싱: 서버에서 데이터 캐싱을 관리하여, 동일한 데이터를 반복적으로 요청할 때 네트워크 부하를 줄입니다.
- 주로 데이터 변경이 드물거나 데이터 크기가 큰 경우 유리: 서버에서 캐싱하여 클라이언트 사이드의 부하를 줄입니다.
- SEO에 유리: 서버에서 렌더링된 HTML을 전달하여 SEO 이점도 얻을 수 있습니다.

어떤 캐시를 선택해야 할까요?

기업의 요구사항에 따라 다르게 고려될 수 있겠지만, 일반적으로 유저가 많고 데이터 요청이 빈번한 SPA(Single Page Application)의 경우 클라이언트 캐시인 React Query가 더 적합할 수 있습니다. 이는 사용자 경험을 개선하고 즉각적인 반응성을 제공하기 때문입니다. 반면, SEO가 중요한 정적 사이트라면 unstable_cached 등 서버 측 캐시 전략도 충분한 가치가 있습니다.

인프런 커뮤니티 질문&답변