Next.js 캐시 구조 Request Data Full Route Router Cache

React 컴포넌트·TypeScript·async/await를 알고 시작합니다. Next.js 환경 준비의 루트 app/ TypeScript App Router 프로젝트를 별도 연습 폴더에서 사용합니다. 이 글의 기존 실습 기준은 Next.js 16.3.5이며 Cache Components는 끈 구성입니다. 생성된 app/layout.tsx는 유지합니다. 아래 파일은 TaskFlow·인증·DB 없이 실행하는 독립 예제입니다.

별도 터미널에서 node scripts/cache-api.mjs를 실행하고 Next 앱은 npm run build 후 npm run start로 실행합니다. API 값은 PowerShell의 Invoke-RestMethod -Method Post -Uri http://127.0.0.1:4100/public-stats로 바꿀 수 있습니다. 이 글에 고정된 Next.js 16.3.5에서는 force-dynamic과 명시적 next.revalidate:60을 함께 사용한 원본 cache-lab이 요청 간 공개 데이터를 재사용했습니다. 이 설치 구현에서 양의 revalidate:60은 force-dynamic으로 기본 재검증 값을 0으로 정하는 조건에 들어가지 않습니다. 문서의 요약만으로 이 예제의 60초 캐시가 불가능하다고 판단하지 말고, 같은 설치 버전에서 두 버튼의 결과를 비교하세요.

scripts/cache-api.mjs 전체 코드

import { createServer } from "node:http";
let revision = 1;
createServer((req, res) => {
  if (req.url !== "/public-stats") {
    res.writeHead(404).end();
    return;
  }
  if (req.method === "POST") revision++;
  res.setHeader("Content-Type", "application/json");
  res.end(JSON.stringify({ revision, label: "공개 통계 실습" }));
}).listen(4100, "127.0.0.1", () => console.log("공개 통계 실습 API 준비 완료"));

app/practice/page.tsx 전체 코드

import Refresh from "./refresh";
import { revalidateTag } from "next/cache";
export const dynamic = "force-dynamic";
async function refresh() {
  "use server";
  revalidateTag("public-stats", "max");
}
export default async function CacheLab() {
  let data: { revision: number; label: string } | null = null;
  try {
    const response = await fetch("http://127.0.0.1:4100/public-stats", {
      next: { revalidate: 60, tags: ["public-stats"] },
    });
    if (response.ok) data = await response.json();
  } catch {}
  return (
    <main>
      <h1>공개 데이터 캐시 실험</h1><Refresh />
      <p>개인 작업은 캐시하지 않고, 별도 공개 통계만 60초 캐시합니다.</p>
      {data ? (
        <p>공개 통계 버전: {data.revision}</p>
      ) : (
        <p>별도 터미널에서 node scripts/cache-api.mjs를 실행하세요.</p>
      )}
      <form action={refresh}>
        <button>공개 통계 재검증 요청</button>
      </form>
      <p>
        max 프로필은 stale-while-revalidate이므로 다음 요청에서 이전 값이 잠깐
        보일 수 있습니다.
      </p>
    </main>
  );
}

app/practice/refresh.tsx 전체 코드

자가 확인: 새 SSR 요청이 일어나도 공개 데이터가 이전 revision인 이유를 route 결과와 fetch Data Cache로 나누어 설명해 보세요. 이 고정 버전의 실행 결과를 다른 Next.js 버전이나 Cache Components를 켠 구성에 그대로 적용하지 않습니다. 같은 서버 렌더의 중복 GET, 요청을 넘는 데이터, 정적 route 결과, 브라우저 이동 결과도 각각 분류하되 이 코드로 네 캐시를 모두 측정했다고 하지는 않습니다.