Next.js에서 페이지 전환이 빠르고 서버 요청이 줄어드는 건 자동 캐싱을 지원하기 때문이다.
그런데 이 캐싱에도 종류가 여러 개고, 직접 제어할 수 있는 포인트가 있다는 걸 알게 됐다.
이번 포스팅에서는 요청 캐싱(Request Memoization)과 데이터 캐싱(Data Cache)에 대해 정리해보자.
Request Memoization(요청 캐싱)
하나의 서버에 같은 요청이 들어오면, 하나로 받아 중복 요청을 방지하는 캐싱
- 하나의 요청 흐름(Request lifecycle) 안에서만 적용된다.
- 즉, 컴포넌트가 같은 데이터를 여러 번 요청하더라도, 한번만 요청되고 공유된다.
- 사용자가 페이지를 새로고침하거나 다시 진입하면 초기화 🌀
Data Cache(데이터 캐싱)
백엔드 요청 결과를 서버에 저장해서, 반복된 요청 없이 저장된 결과를 재사용하는 캐시
- fetch()를 통해 가져온 데이터는 Next.js의 서버 캐시에 저장됨
- 동일한 페이지를 다시 열어도 저장된 응답을 재사용함
- 사용자가 재검증을 요청하거나, 재검증 시간이 지나야 다시 요청됨
캐싱의 이점
- 불필요한 API 요청을 줄임
- 서버 부하도 줄임
- 왔다갔다를 줄여 앱 전체의 성능을 높임
요청 자체를 피하는 것 (추가 왕복을 줄여 애플리케이션을 더 빠르게 할 수 있다.)
캐시 제어 (1) : fetch()에서 직접 설정
1. 캐시 끄기
fetch(url, { cache : 'no-store'});매번 새로운 데이터를 요청하는 방법으로, 테스트나 관리자 페이지에 유용하다.
2. 재검증 시간 설정
fetch(url, { next: { revalidate: 5 } });숫자는 캐싱을 유지한 시간이다. 여기서는 데이터를 5초간 캐싱하고 이후부터는 새로 요청한다.
=> 일부 캐싱 이점을 유지하면서도, 오래된 데이터는 방지 가능
캐시 제어(2) : 파일 단위 제어
1. 파일 전체에 캐싱 시간 설정
export const revalidate = 5; // 5초 동안 캐시 유지파일안의 모든 캐시에 적용되고, export와 상수 이름은 고정이다.
2. 전체 강제 동적/정적 렌더링
export const dynamic = "force-dynamic" // 파일 내 어디서든 필요한 모든 데이터를 항상 다 가져옴
export const dynamic = "force-static" // 새로운 데이터를 전혀 가져오지 않게 됨 (캐싱 강조)캐시를 피하거나 캐시를 강제하는 방법
캐시 제어(3) : 컴포넌트 단위 제어
파일 전체가 아닌 일부 컴포넌트만 캐시에서 제외하고 싶을 때 사용하자.
import { unstable_noStore } from "next/cache";
unstable_noStore(); // 이 컴포넌트에서의 요청은 캐시 사용 안 함force-dynamic보다 더 세밀한 조정이 가능해 권장- 특정 컴포넌트에서만 캐시를 끄고 싶을 때 추천
