cache revalidate

 

🎯 cache와 revalidate란 무엇일까요?

먼저 간단히 설명할게요.

• Cache(캐시):
  자주 사용하는 데이터를 미리 저장해두고 빠르게 보여주는 기술이에요.
  예를 들어, 여러분이 자주 보는 웹사이트를 미리 저장해두고 다음에 열 때 더 빠르게 보여주는 거죠.
• Revalidate(리밸리데이트):
  저장된 캐시 데이터를 새롭게 갱신(재검증)하는 작업이에요.
  데이터를 항상 최신 상태로 유지하면서도, 속도와 성능을 유지하게 도와줘요.

 

🍔 햄버거 가게 이야기로 이해하기

여러분이 햄버거 가게를 운영한다고 생각해 봐요. 🍔

• 캐시는 햄버거를 미리 만들어서 보관하는 거예요.
  손님이 오면 바로 꺼내서 줄 수 있어서 엄청 빠르게 서비스할 수 있어요.
• 하지만 햄버거를 너무 오래 두면 신선도가 떨어지겠죠?
  그래서 가끔 **햄버거를 새로 만들어서 교체(리밸리데이트)**해야 해요.
  이게 바로 **revalidate**예요.

햄버거를 계속 새로 만들면(최신 데이터 유지) 시간이 오래 걸리고,
너무 오래 보관하면(캐시만 사용) 손님이 맛이 없다고 할 수 있으니까,
적절한 주기에 새로 만들어서 빠른 서비스와 신선도를 모두 유지하는 게 중요해요!

 

🛠️ Next.js에서 cache와 revalidate 사용하기

Next.js 14에서는 데이터를 캐시에 저장하고, 일정 시간 후에 재검증(revalidate) 할 수 있어요.
그럼 어떻게 사용할 수 있는지 예제를 통해 살펴볼게요!

 

1. API 데이터를 가져올 때 캐시와 리밸리데이트 설정하기

app/page.js:

import React from 'react';

export default async function Page() {
  // fetch 함수에 'revalidate' 옵션 추가
  const response = await fetch('https://api.example.com/posts', {
    next: { revalidate: 10 }, // 10초마다 캐시를 새로 고침
  });

  const posts = await response.json();

  return (
    <div>
      <h1>블로그 글 목록</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

🔍 코드 설명

1. 캐시 설정
   • fetch 함수의 next: { revalidate: 10 } 부분이 핵심이에요.
   • 여기서 10은 10초마다 데이터를 새로 가져오라는 뜻이에요.
   • 결과:
     • 첫 번째 요청: 데이터를 가져와서 캐시에 저장합니다.
     • 이후 10초 동안은 캐시 데이터를 사용해서 빠르게 화면을 보여줍니다.
     • 10초가 지나면 캐시를 새로 업데이트합니다(리밸리데이트).
2. 빠른 로딩과 최신 데이터 유지
   • 사용자는 데이터를 빠르게 볼 수 있고,
   • 일정 시간이 지나면 데이터가 최신 상태로 유지됩니다.

 

🚀 Revalidate를 왜 사용할까요?

• 성능 향상
  • 서버에 매번 요청하는 대신, 캐시에 저장된 데이터를 사용하니까 로딩이 빠릅니다.
• 최신 데이터 유지
  • 일정 시간이 지나면 데이터를 새로 가져오기 때문에 최신 정보를 보여줄 수 있어요.
• 유연한 설정
  • revalidate 값(초)을 조절해서 얼마나 자주 데이터를 새로 가져올지 정할 수 있어요.

 

⏳ 캐시 vs 리밸리데이트 간단 비교

개념설명

캐시	데이터를 저장해서 빠르게 보여줍니다.
Revalidate	저장된 데이터를 일정 시간 후에 새로 고칩니다.

 

🧩 실전 예제: 블로그 페이지

예를 들어, 여러분이 블로그 사이트를 만들고 있어요.

• 블로그 글은 자주 바뀌지만 매초마다 바뀌진 않겠죠?
• 이럴 때 **revalidate**를 사용해서 30초마다 데이터를 새로 고칠 수 있어요.

const response = await fetch('https://api.example.com/posts', {
  next: { revalidate: 30 }, // 30초마다 캐시 갱신
});

이렇게 설정하면:

1. 사용자가 페이지를 열 때 빠르게 데이터를 보여주고,
2. 30초마다 데이터를 새로 가져오니까 최신 데이터도 유지할 수 있어요.

 

🌟 한 줄 요약

revalidate는 캐시된 데이터를 일정 시간 후에 새로 갱신해서, 빠른 로딩과 최신 데이터를 동시에 유지하게 해주는 기능이에요.