Next.js에서의 서버 사이드 캐싱과 클라이언트 사이드 캐싱

 Vintz 튜터님과 두번째 토론. 주제는 서버 사이드 캐싱과 클라이언트 캐싱의 차이점과 Next.js에서의 활용법이었다. 근데 내용이 너~무 어려워서 제대로 공부를 못 해 갔는데, 토론을 하다 보니 Next.js 부분은 강의를 찍으신 Chancellor튜터님께 직접 가는 게 나은 것 같아 튜터님과 Chancellor 튜터님 방이 비자마자 달려갔다. 질문을 드리자마자 너무나 완벽한 정리를 술술 설명해 주셨고 기억이 날아가기 전에 정리를 해 두려고 한다. 

---

1. 캐싱

 - 한번 불러온 데이터를 효율화를 위하여 서버나 브라우저 사이드에 저장해주고 빠르게 불러올 수 있도록 하는 프로세스. 

 - Next.js에서는 하고 싶은 기능에 따라 서버 사이드 캐싱/클라이언트 사이드 캐싱 중 더 적절한 옵션을 선택해서 진행한다. 

2. Next.js에서의 클라이언트 사이드 캐싱

 2-1. React Query의 캐싱

 - React Query 나 SWR 같은 네트워크 데이터 캐싱 라이브러리에서 제공해주는 캐싱을 Next.js에서 사용할 수 있다.

 

 2-2. 라우터 캐시(Router Cache)

 - react에서의 navigate 기능과 동일. 

 - 이전에 방문한 경로를 저장하고 미래 경로를 프리패치하여 내비게이션 경험을 개선함. 

 - 정적/동적 렌더링에 상관없이 적용

3. Next.js에서의 서버 사이드 캐싱

 3-1. 풀 라우트 캐시(Full Route Cache)

 - 서버 측에서 페이지의 HTML 렌더링 결과를 캐시

 - 정적으로 렌더링된 경로만 캐시

 

 3-2. 데이터 캐시(Data Cache)

 - 서버 요청 및 배포를 통해 데이터 가져오기의 결과를 유지함. 

 - fetch 요청 호출 => 데이터 캐시 확인 => 캐시된 응답이 발견되면 즉시 반환, 메모이제이션 / 발견되지 않으면 데이터 소스로 요청이 이루어지고, 결과가 데이터 캐시에 저장되고 메모이제이션됨.

 - 캐시되지 않은 데이터의 경우(ex. { cache : 'no-store }), 항상 데이터 소스에서 결과가 가져와지고 메모이제이션된다. 데이터가 캐시되었든 캐시되지 않았든 요청은 항상 메모이제이션되어 React 렌더링 패스 중에 동일한 데이터에 대한 중복 요청이 발생하지 않도록 한다. 

 

3-3.리퀘스트 메모이제이션(Request Memoization)

 - fetch API를 확장하여 동일한 URL과 옵션을 가진 요청을 자동으로 메모함. React 컴포넌트 트리의 여러 위치에서 동일한 데이터에 대한 가져오기 함수를 한 번만 실행하면서 호출할 수 있음.

 

 

캐싱을 어렵게 이해하려 하기 보다는 현상을 보라는 말씀을 하셨다. 결국 겪어 보고 내가 써 봐야 진짜로 이해가 된다는 말씀. 다 외우고 하는 것 보다는 프레임워크인 Next.js를 이용하기 위해 그 옵션을 알아두는 것 정도가 적당한 학습법인 것 같다. 

 

 

 

 

참고 자료

 Next.js cache

 Caching and Revalidating