📌 Next.js Cache - Full Route Cache & Data Cache

Next.js에서 정적 페이지(Static Site) 와 동적 페이지(Dynamic Site) 에 따라 데이터를 캐싱하는 방식이 다릅니다. 이를 관리하는 대표적인 방법이 Full Route Cache 와 Data Cache 입니다.

🚀 1. Full Route Cache (정적 사이트)

정적인 페이지는 미리 생성된 HTML과 데이터를 제공하기 때문에 빠른 로딩 속도를 보장할 수 있습니다. Next.js에서는 이를 Full Route Cache를 이용해 관리합니다.

✅ Full Route Cache 사용 조건

• fetch 옵션에서 "no-store"가 없어야 함.
• 옵션이 아예 없거나 "force-cache" 로 설정되어야 함.
• next 폴더의 cache/fetch-cache에 API 응답이 저장됨.
• revalidate를 통해 캐시를 갱신 가능.

🔍 확인 방법

1. 서버 실행 후 터미널에서 정적 경로(Static Route) 를 나타내는 동그라미(⚪)가 있는지 확인.
2. .next/cache/fetch-cache 폴더에서 API URL이 포함된 캐시 파일 확인.
3. 네트워크 탭에서 빠른 응답 속도 확인 (서버가 아닌 캐시에서 데이터를 제공하기 때문).

---

🔄 2. Revalidate를 이용한 데이터 갱신 (정적 사이트)

정적인 페이지에서도 revalidate를 사용하면 주기적으로 데이터가 업데이트될 수 있습니다.

const res = await fetch("https://api.example.com/products", {
  next: { revalidate: 60 }, // 60초마다 캐시 갱신
});

이렇게 하면 60초마다 새로운 데이터를 가져와서 업데이트할 수 있습니다. 즉, SSG(Static Site Generation)에서도 데이터 업데이트가 가능하게 되는 것이죠!

---

⚡ 3. Request Memoization (요청 최적화)

Next.js에서는 같은 요청을 여러 번 보낼 경우, 자동으로 하나의 요청으로 합쳐서 처리(request memoization) 합니다.

const fetchProducts = async () => {
  const res1 = await fetch("https://api.example.com/products");
  const res2 = await fetch("https://api.example.com/products");
};

위 코드처럼 같은 URL에 대해 여러 번 요청하더라도 한 번만 fetch가 실행되고 동일한 데이터를 공유하게 됩니다. 이는 불필요한 API 호출을 줄이는 데 큰 도움이 됩니다. 😊

---

🛠 4. 동적 페이지에서 데이터를 정적으로 가져오는 방법

동적인 라우트를 사용하는 페이지에서도 데이터를 정적으로 가져올 수 있습니다. 이를 위해 generateStaticParams를 활용합니다.

✅ 기본 사용법

export const generateStaticParams = () => {
  return [{ id: "1" }, { id: "2" }]; // 미리 정해진 ID 목록을 반환
};

위처럼 하면 /product/1, /product/2 등의 페이지가 정적으로 생성됩니다.

🏗 비동기 데이터 활용하기

비동기 함수에서 API 데이터를 가져와 정적 페이지를 생성할 수도 있습니다.

export const generateStaticParams = async () => {
  const res = await fetch("https://api.example.com/products", {
    cache: "force-cache",
    next: {
      tags: ["products"],
    },
  });
  const products = await res.json();

  return products.map((product) => ({ id: product.id }));
};

✅ 특징

• 라우트는 동적이지만 데이터는 정적으로 가져오는 방법
• 미리 정의된 데이터만 정적으로 생성됨
• API 데이터를 기반으로 SSG 가능

이 방법을 사용하면 동적 경로라도 미리 페이지를 생성해 놓을 수 있어 빠른 로딩 속도와 SEO 향상을 동시에 챙길 수 있습니다! 🚀

---

🎯 마무리

방법	적용 대상	특징
Full Route Cache	정적 페이지	페이지 전체를 캐싱하여 빠르게 로딩
Revalidate	정적 페이지	일정 시간 후 새로운 데이터로 갱신 가능
Request Memoization	모든 페이지	동일한 요청을 자동으로 합쳐서 API 호출 최적화
generateStaticParams	동적 페이지	동적 경로에서도 미리 데이터를 가져와 정적으로 생성

정적인 데이터와 동적인 데이터를 적절히 활용하면 성능과 유지보수성을 높일 수 있습니다!

Next.js의 캐시 전략을 잘 활용하여 더 빠르고 효율적인 애플리케이션을 만들어 보세요! 🔥🔥