Full Route Cache

Next.js에서 클라이언트에게 렌더링되는 페이지는 HTML과 RSCP(React Sever Component Payload)로 구성됩니다.

그리고 풀 라우트 캐시는 빌드 시점에 정적 페이지의 HTML, RSCP를 저장하는 캐시입니다.

와닿지 않을테니 예시와 같이 보겠습니다.

import Link from "next/link"

async function getBlogList() {
  const blogPosts = await fetch("https://api.example.com/posts")
  return await blogPosts.json()
}

export default async function Page() {
  const blogData = await getBlogList()

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {blogData.map(post => (
          <li key={post.slug}>
            <Link href={`/blog/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
            <p>{post.excerpt}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

분명 앞서 ‘정적 페이지’의 HTML, RSCP를 저장한다고 했는데, 제시한 예시는 포스팅 리스트를 fetch하고 있습니다.

일반적으로 fetch는 ‘동적 데이터’를 요청하는 것이기 때문에 앞서 말한 풀 라우트 캐시는 적용되지 않겠습니다.

단, 이 동적 데이터가 캐시되어 있다면 ‘정적 데이터’를 가져오는 것이라고 봐도 되겠죠?

정리하자면, 앞선 포스팅에서 언급한 ‘데이터 캐시’를 통해 ‘동적 데이터’를 ‘정적 데이터’로 활용하면서 풀 라우트 캐시를 가능케하는 방식입니다.

마무리

오늘은 생각보다 간단한 캐싱 방식이네요.

혹시나 해당 캐시 방식을 테스트하시는 분들은 프로덕션 환경에서만 확인이 가능한 점 주의하시면 좋을 것 같습니다.

아래는 해당 캐싱 과정 대한 다이어그램입니다.

Reference.

👉🏻 Finally Master Next.js's Most Complex Feature - Caching

Next.js의 캐싱 매커니즘 세 번째 ‘Full Route Cache’

Full Route Cache

마무리

Reference.