Cache Components는 Next.js에서 렌더링과 캐싱을 처리하는 새로운 방식으로, 어떤 것이 언제 캐시될지를 세밀하게 제어할 수 있게 해준다. 또한 Partial Prerendering(PPR)을 통해 뛰어난 사용자 경험을 보장한다.

1. Cache Components

동적 애플리케이션을 개발할 때, 다음 두 가지 접근 방식 사이에서 균형을 맞춰야 한다.

• 완전 정적 페이지는 빠르게 로드되지만 개인화된 데이터나 실시간 데이터를 보여줄 수 없다.
• 완전 동적 페이지는 최신 데이터를 보여줄 수 있지만, 매 요청마다 모든 것을 렌더링해야 하므로 초기 로드가 느려진다.

Cache Components가 활성화되면, Next.js는 모든 라우트를 기본적으로 동적(dynamic)으로 처리한다. 즉, 모든 요청은 최신 데이터를 기반으로 렌더링된다. 하지만 대부분의 페이지는 정적 부분과 동적 부분으로 구성되며, 모든 동적 데이터가 매 요청마다 원본에서 다시 가져와야 하는 것은 아니다.

Cache Components를 사용하면 데이터뿐만 아니라 UI의 특정 부분도 캐싱 가능하도록 표시할 수 있으며, 이렇게 표시된 부분은 페이지의 정적 부분과 함께 사전 렌더링(pre-render) 과정에 포함된다.

Cache Components 이전에는 Next.js가 전체 페이지를 자동으로 정적으로 최적화하려 했기에, 동적 코드를 추가할 경우 예기치 않은 동작이 발생할 수 있었다.

Cache Components는 **Partial Prerendering(PPR)**을 구현하며, 캐시를 활용하여 두 가지 접근 방식의 장점을 모두 제공한다.

사용자가 어떤 라우트를 방문한다면

1. 서버는 캐시된 콘텐츠를 포함한 정적 셸(shell)을 보내 빠른 초기 로드를 보장한다.
2. Suspense 경계로 감싸진 동적 섹션은 셸 안에서 fallback UI를 표시한다.
3. 동적 부분만 준비되는 대로 fallback을 대체하며, 병렬로 스트리밍된다.
4. use cache 를 사용해 동적 데이터를 캐싱하면, 원래 정적이 아니었던 데이터도 초기 셸에 포함시킬 수 있다.

시청: 왜 PPR인가, 그리고 어떻게 작동하는가 → YouTube

2. 작동 방식(How it works)

Cache Components는 선택적 기능이다. Next 설정 파일에서 cacheComponents 플래그를 true 로 설정하여 활성화하자. 자세한 내용은 Cache Components 활성화하기를 참조하자.