Javascript

Next.js "use cache" 한방에 이해하기!

드리프트2 2024. 10. 30. 20:58

Next.js "use cache" 한방에 이해하기!

얼마 전, Next.js Conf 2024가 성황리에 개최되었습니다!

컨퍼런스에서 가장 뜨거운 관심을 받았던 주인공은 바로 "use cache" 기능이 아닐까 싶은데요.

오늘은 이 "use cache" 기능이 도대체 뭔지, 어떻게 활용하는지, 그리고 왜 주목해야 하는지, 속 시원하게 알려드리겠습니다!

혹시 Next.js의 캐시 기능 때문에 머리 아팠던 경험이 있으신가요? 그렇다면 이 글을 끝까지 읽어보세요.

"use cache"가 여러분의 고민을 해결해 줄 겁니다!

(참고) "use cache"는 2024년 10월 30일 기준으로 아직 실험적인 기능입니다.

Next.js App Router의 기존 캐시 기능, 뭐가 문제였을까?

App Router에서는 기존에 기본적으로 캐시가 활성화되어 있었습니다.

예를 들어, fetch() 함수를 사용하면 데이터가 자동으로 캐시되었는데요.

문제는 개발자가 데이터를 동적으로 가져오고 싶어도, 기본 설정이 정적 캐시였기 때문에, 동적인 애플리케이션을 만들 때 개발 경험이 그다지 좋지 않았다는 점입니다.

Next.js 15, "use cache"로 캐시 전략 대변신!

Next.js 15에서는 fetch() 함수가 기본적으로 캐시되지 않습니다. 즉, 모든 데이터는 기본적으로 동적으로 가져오게 됩니다.

그렇다면 캐시를 활용하고 싶을 때는 어떻게 해야 할까요?

바로 "use cache"를 사용하면 됩니다!

1. 페이지 전체 캐시, 간단하게!

정적인 페이지를 만들 때처럼, app/page.tsx 파일의 맨 위에 "use cache"를 선언하면 페이지 전체가 캐시됩니다.

// app/page.tsx
"use cache";

export default async function Page() {
  return fetch("..."); 
}

2. 부분 캐시, 유연하게!

기본적으로는 캐시를 활성화하고 싶지만, 일부 처리만 동적으로 하고 싶을 때는 어떻게 해야 할까요?

app/layout.tsx에서 "use cache"를 선언하면, 기본적으로 캐시가 활성화됩니다.

그리고 app/page.tsx에서 필요한 부분만 동적으로 데이터를 가져올 수 있습니다.

// app/layout.tsx
"use cache";

export default async function Layout({ children }) {
  const response = await fetch("...");
  const data = await response.json();
  return (
    <html>
      <body>
        <div>{data.notice}</div>
        {children}
      </body>
    </html>
  );
}

// app/page.tsx
import { Suspense } from 'react'
async function Component() {
  return fetch(...)
}

export default async function Page() {
  return <Suspense fallback="..."><Component /></Suspense>
}

"기본 캐시 활성화, 일부만 비활성화" 또는 "기본 캐시 비활성화, 일부만 활성화" 모두 가능해졌다는 점, 정말 편리하지 않나요?

3. 함수 단위 캐시, 섬세하게!

"use cache"는 함수 단위로도 적용할 수 있습니다.

async function getNotice() {
  "use cache";
  const response = await fetch("...");
  const data = await response.json();
  return data.notice; 
}

4. `cacheTag()`로 캐시 태깅, 관리도 똑똑하게!

cacheTag() 함수는 캐시된 데이터를 삭제(Purge)하고 싶을 때 사용합니다.

Next.js는 기본적으로 캐시 키(Cache Key)와 데이터를 연결하여 캐시를 관리합니다.

하지만 Next.js 15에서는 캐시 키를 직접 정의하지 않아도 Next.js가 데이터를 자동으로 관리해 줍니다.

그러나 이 경우, 개발자가 특정 캐시를 의도적으로 삭제하고 싶을 때, 캐시 키를 알 수 없기 때문에 삭제가 불가능했습니다.

cacheTag() 함수를 사용하면 개발자가 원하는 캐시에 태그를 지정하고, revalidateTag() 함수를 통해 해당 태그가 지정된 캐시를 선택적으로 삭제할 수 있습니다.

import { cacheTag } from 'next/cache';

async function getNotice() {
  'use cache';
  cacheTag('my-tag'); 
}

이제 리소스 단위로 캐시를 더욱 효율적으로 관리할 수 있게 되었습니다!

5. `cacheLife()`로 캐시 유효 기간 설정, 신선도 유지!

cacheLife() 함수는 캐시의 유효 기간을 설정할 때 사용합니다.

예를 들어, 1시간마다 새로운 데이터를 가져오고 싶을 때 활용할 수 있습니다.

이는 이전 fetch() 함수의 revalidate 속성과 유사한 역할을 합니다.

"use cache";
import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife("minutes");
  return ...;
}

"use cache"로 Next.js 캐시, 이제 걱정 끝!

Next.js 15의 "use cache" 기능은 복잡했던 Next.js 캐시 시스템을 획기적으로 간소화하고, 개발자가 원하는 캐시 전략을 자유롭게 구현할 수 있도록 지원합니다.

특히, 컴포넌트 및 함수 단위로 캐시를 제어할 수 있다는 점은 개발 생산성 향상에 큰 도움이 될 것으로 기대됩니다.

끊임없이 진화하는 Next.js의 미래가 더욱 기대되는 이유, 이제 아시겠죠?

'Javascript' 카테고리의 다른 글

자바스크립트 얕은 복사 vs 깊은 복사, 완벽 정리! (0)	2024.10.30
Next.js 15, 달라진 점 싹 다 훑어보기! (1)	2024.10.30
Next.js 15의 혁신적인 캐시 기능 (0)	2024.10.30
잘 모르는 JavaScript와 파생 언어의 세계 (1)	2024.10.18
Deno v2가 출시되었습니다! - Deno v1.0.0부터의 변화와 현재의 실무 관행 (2)	2024.10.18

현재글Next.js "use cache" 한방에 이해하기!

드리프트의 뉴 코딩 이야기