03편의 홈 화면은 notices.seed.json을 직접 import해서 렌더링했습니다. 배포 시점에 딱 한 번 만들어진 그대로라, 공지사항이 추가돼도 재배포 전까지는 절대 바뀌지 않습니다. 이 편에서는 06편에서 만든 mock API를 fetch로 불러오도록 바꾸고, revalidate로 “60초에 한 번은 다시 확인”하는 규칙을 추가합니다.

이 편에서 만드는 파일

notice-board/
├── customHttp.yml    (~, / 오버라이드를 제거해 Next.js가 실제로 보내는 헤더를 관찰)
└── app/
    └── page.js        (~, notices.seed.json 직접 import 대신 fetch + revalidate로 전환)

개념 정리

정적/동적을 가르는 기준

Next.js는 페이지 안에서 Request-time API(cookies(), headers(), 검색 파라미터 등)를 쓰는지로 정적/동적을 가릅니다.

지금 만드는 홈 화면은 fetch만 쓰고 Request-time API를 쓰지 않으므로 정적으로 분류됩니다.

revalidate로 정적 페이지에 유효기간 걸기

정적 페이지는 원래 무기한 캐시됩니다(재배포 전까지 그대로). fetch의 next.revalidate 옵션에 초 단위 숫자를 주면, 그 시간이 지난 뒤 들어오는 요청이 백그라운드에서 페이지를 다시 만들고 그 결과를 CDN까지 전달합니다. 이 방식이 시간 기반 ISR(Incremental Static Regeneration)입니다.

fetch(url, { next: { revalidate: 60 } })

같은 라우트에 여러 fetch가 있고 서로 다른 revalidate 값을 주면, 가장 짧은 값이 라우트 전체의 재검증 주기가 됩니다.

ISR 페이지가 자동으로 갖는 Cache-Control

Next.js는 ISR 페이지의 응답에 s-maxage=<revalidate 값>, stale-while-revalidate 형태의 Cache-Control을 자동으로 붙입니다. revalidate를 지정하지 않은 완전 정적 페이지는 사실상 1년에 가까운 값이 붙습니다.

05편의 오버라이드가 이 값을 가린다

05편에서 홈 화면(/)에 s-maxage=30 커스텀 헤더를 걸어뒀습니다. Amplify는 origin이 보낸 값을 커스텀 헤더로 대체하므로, 지금 홈 화면에 revalidate를 추가해도 curl로 보이는 값은 여전히 30입니다. Next.js가 실제로 무엇을 계산해서 보내는지 확인하려면, 먼저 이 오버라이드를 없애야 합니다.

실습

# customHttp.yml
customHeaders: []

// app/page.js
import Link from 'next/link';
 
async function getNotices() {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? 'http://localhost:3000';
  const response = await fetch(`${baseUrl}/api/notices`, {
    next: { revalidate: 60 },
  });
 
  if (!response.ok) {
    throw new Error('공지사항 목록을 가져오지 못했습니다');
  }
  return response.json();
}
 
export default async function HomePage() {
  const notices = await getNotices();
 
  return (
    <section>
      <h1>공지사항</h1>
      <ul>
        {notices.map((notice) => (
          <li key={notice.id}>
            <Link href={`/notices/${notice.id}`}>{notice.title}</Link>
            <span className="notice-date">{notice.publishedAt}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

git add customHttp.yml app/page.js
git commit -m "홈 화면을 fetch + 60초 ISR로 전환하고 05편 오버라이드 정리"
git push

curl -I https://main.d1234567890abc.amplifyapp.com/

HTTP/2 200
content-type: text/html; charset=utf-8
cache-control: s-maxage=60, stale-while-revalidate
x-cache: Miss from cloudfront
age: 0

직접 해보기

1. revalidate 값을 10으로 낮춰 재배포하고, 10초 간격으로 curl -I를 반복해 age가 얼마나 자주 리셋되는지 확인해보세요.
2. data/notices.seed.json에 새 공지사항을 추가하고 재배포한 뒤, 홈 화면에 반영되기까지 걸리는 시간을 재검증 주기와 비교해보세요.

자주 하는 실수

확인 문제

참고 자료

• Next.js Docs — Caching and Revalidating (Previous Model) 
• Next.js Docs — fetch API Reference 
• Next.js Docs — How to self-host your Next.js application (Caching and ISR)