전 Next.js 의 미래가 마음에 들어요 : 정말 멋있어지고 있어요

(tigerabrodi.blog)

Next.js의 미래 방향이 흥미로움
Server Actions에 대한 이슈가 있었지만 React 19의 useOptimistic, useFormStatus로 개선 가능성이 보임
- Remix의 useFetcher 방식도 좋은 DX를 제공함
Next.js의 PPR(Partial Pre-rendering)과 새로운 granular 캐시 시스템이 특히 돋보임
전반적으로 매우 긍정적인 인상을 받음

The Big Picture

next.config.js에서 새로운 캐시 시스템을 실험적으로 활성화할 수 있음
캐시 프로필을 정의해 다양한 만료 시간과 재검증 주기를 설정할 수 있음

// next.config.js  
const config = {  
  experimental: {  
    // 새로운 캐싱 시스템 활성화. 이제 코드에서 `use cache` 사용 가능   
    dynamicIO: true,   
    // 선택사항: 캐시 프로파일 설정   
    cacheLife: {  
      blog: {  
        stale: 3600, // 클라이언트 캐시 유지: 1시간  
        revalidate: 900, // 서버에서 새로고침: 15분  
        expire: 86400, // 최대 수명: 1일  
      },  
    },  
  },  
};

`use cache` 기본 사용법

파일, 컴포넌트, 함수 수준에서 "use cache" 선언을 통해 캐싱 가능함
코드 예시에서 use cache를 추가해 쉽게 캐시를 적용할 수 있음
cacheTag, revalidateTag 등을 활용해 원하는 시점에 캐시 무효화가 가능함

// 1. 파일 단위 캐싱  
"use cache";  
export default function Page() {  
  return <div>Cached Page</div>;  
}  
  
// 2. 컴포넌트 단위 캐싱  
export async function PriceDisplay() {  
  "use cache";  
  const price = await fetchPrice();  
  return <div>${price}</div>;  
}  
  
// 3. 함수 단위 캐싱  
export async function getData() {  
  "use cache";  
  return await db.query();  
}

태그 기반 캐싱

import { unstable_cacheTag as cacheTag, revalidateTag } from 'next/cache';  
  
// 특정 데이터 그룹 캐싱  
export async function ProductList() {  
  'use cache';  
  cacheTag('products');  
  const products = await fetchProducts();  
  return <div>{products}</div>;  
}  
  
// 데이터 변경 시 캐시 무효화  
export async function addProduct() {  
  'use server';  
  await db.products.add(...);  
  revalidateTag('products');  
}

사용자 정의 Cache 프로필

unstable_cacheLife를 사용해 next.config.js에서 정의한 캐시 프로필을 불러올 수 있음
코드 내부에서 선언된 프로필명(예: "blog")을 사용해 캐시 정책을 적용함

import { unstable_cacheLife as cacheLife } from "next/cache";  
  
export async function BlogPosts() {  
  "use cache";  
  cacheLife("blog"); // 미리 정의한 블로그 캐시 프로필 사용  
  return await fetchPosts();  
}

중요하지만 간과할 수 있는 사항

캐시 키 자동 생성

컴포넌트의 props와 arguments가 자동으로 캐시 키에 포함됨
직렬화 불가능한 값(함수 등)은 "수정 불가능한 참조" 형태로 처리됨

export async function UserCard({ id, onDelete }) {  
  "use cache";  
  // id는 캐시 키에 포함  
  // onDelete는 전달되지만 캐싱에는 영향을 주지 않음  
  const user = await fetchUser(id);  
  return <div onClick={onDelete}>{user.name}</div>;  
}

동적 콘텐츠와 캐시 콘텐츠의 혼합

캐시된 콘텐츠 내부에 동적 콘텐츠를 자식으로 전달해 혼합해 사용할 수 있음
cacheTag 배열을 지정해 여러 태그를 동시에 적용하고 무효화할 수 있음

export async function CachedWrapper({ children }) {  
  "use cache";  
  const header = await fetchHeader();  
  return (  
    <div>  
      <h1>{header}</h1>  
      {children} {/* 동적 콘텐츠는 그대로 유지 */}  
    </div>  
  );  
}

export async function ProductPage({ id }) {  
  "use cache";  
  cacheTag(["products", `product-${id}`, "featured"]);  
  // 이 태그들 중 어떤 것을 사용해도 무효화 가능  
}

캐싱 계층 구조

최상위 레벨에서 "use cache"를 선언하면 해당 영역 전체가 캐시됨
특정 부분(예: Suspense를 사용한 동적 섹션)은 캐싱 영역에서 제외할 수 있음

"use cache";  
export default async function Page() {  
  return (  
    <div>  
      <CachedHeader />  
      <div>  
        <Suspense fallback={<Loading />}>  
          <DynamicFeed /> {/* 동적 콘텐츠 */}  
        </Suspense>  
      </div>  
    </div>  
  );  
}

타입 안전성

캐시 키와 캐시 프로필 등 문자열을 상수로 관리해 매직 스트링 사용을 줄일 수 있음
React Query의 패턴처럼 태그를 생성해주는 방식을 사용하면 편리함

// 상수로 캐시 프로필 키를 관리  
export const CACHE_LIFE_KEYS = {  
  blog: "blog",  
} as const;  
  
const config = {  
  experimental: {  
    cacheLife: {  
      [CACHE_LIFE_KEYS.blog]: {  
        stale: 3600,  
        revalidate: 900,  
        expire: 86400,  
      },  
    },  
  },  
};

캐싱 태그를 효율적으로 관리하는 방법

React Query 스타일의 태그 팩토리 패턴 적용

export const CACHE_TAGS = {  
  blog: {  
    all: ["blog"] as const,  
    list: () => [...CACHE_TAGS.blog.all, "list"] as const,  
    post: (id: string) => [...CACHE_TAGS.blog.all, "post", id] as const,  
    comments: (postId: string) =>  
      [...CACHE_TAGS.blog.all, "post", postId, "comments"] as const,  
  },  
} as const;  
  
// 캐싱 태그 설정  
function tagCache(tags: string[]) {  
  cacheTag(...tags);  
}  
  
// 사용 예제  
export async function BlogList() {  
  "use cache";  
  tagCache(CACHE_TAGS.blog.list());  
}