Next.js에서 캐싱
- Published on
- Next.js의 캐싱 메커니즘 개요.
Next.js는 렌더링 작업과 데이터 요청을 캐싱하여 애플리케이션의 성능을 향상시키고 비용을 절감합니다. 이 페이지에서는 Next.js의 캐싱 메커니즘, 그것을 구성하기 위해 사용할 수 있는 API, 그리고 그들이 어떻게 서로 상호 작용하는지에 대해 깊이 있는 정보를 제공합니다.
대부분의 Next.js 캐싱 휴리스틱은 사용자의 API 사용 패턴에 의해 결정되며 최적의 성능을 위한 기본 설정이 제공됩니다.
개요
다양한 캐싱 메커니즘과 그들의 목적에 대한 고수준 개요는 다음과 같습니다.
| 메커니즘 | 무엇을 | 어디서 | 목적 | 지속 시간 |
|---|---|---|---|---|
| 요청 메모이제이션 | 함수의 반환 값 | 서버 | React 컴포넌트 트리에서 데이터 재사용 | 요청당 수명 주기 |
| 데이터 캐시 | 데이터 | 서버 | 사용자 요청과 배포 간의 데이터 저장 | 영구적 (재검증 가능) |
| 전체 루트 캐시 | HTML과 RSC 페이로드 | 서버 | 렌더링 비용 감소 및 성능 향상 | 영구적 (재검증 가능) |
| 라우터 캐시 | RSC 페이로드 | 클라이언트 | 탐색 시 서버 요청 감소 | 사용자 세션 또는 기간 기반 |
기본적으로 Next.js는 성능을 향상시키고 비용을 줄이기 위해 최대한 많은 것을 캐싱합니다. 이는 루트가 정적으로 렌더링되며 데이터 요청이 캐싱된다는 것을 의미합니다, 사용자가 선택하지 않는 한. 아래 다이어그램은 빌드 시간에 경로가 정적으로 렌더링될 때와 정적 경로가 처음 방문될 때의 기본 캐싱 동작을 보여줍니다.
캐싱 동작은 루트가 정적으로 또는 동적으로 렌더링되는지 데이터가 캐시되거나 캐시되지 않는지 요청이 초기 방문의 일부인지 아니면 후속 탐색의 일부인지에 따라 변경됩니다. 사용 사례에 따라 개별 루트와 데이터 요청에 대한 캐싱 동작을 구성할 수 있습니다.