Incremental Static Regeneration(ISR) — 정적의 속도 + 동적의 신선함
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. ISR의 "Stale-While-Revalidate" 동작을 가장 정확하게 설명한 것은?
💡 SWR(Stale-While-Revalidate)은 캐시된 응답을 즉시 반환해 빠른 응답을 제공하면서, 동시에 백그라운드에서 새 버전을 생성합니다. 사용자는 약간 오래된 데이터를 보지만 빠른 응답을 얻습니다.
Q2. 다음 중 `revalidateTag('blog')`의 효과는?
💡 `revalidateTag('blog')`는 fetch 시 `next: { tags: ['blog'] }`로 태깅된 모든 캐시 항목을 즉시 무효화합니다. 태그를 공유하는 여러 페이지를 한 번에 재생성할 수 있어 편리합니다.
Q3. `export const revalidate = false`의 의미는?
💡 `revalidate = false`는 재검증 주기를 무한대로 설정합니다. 빌드 타임에 생성된 HTML이 다음 배포까지 유지되며 SSG와 동일하게 동작합니다.
Q4. ISR 재생성 중 외부 API가 에러를 반환하면 어떻게 되는가?
💡 ISR의 큰 장점 중 하나는 재생성 실패 시 graceful degradation입니다. 에러가 발생해도 이전에 성공한 버전의 페이지를 계속 서빙해 사용자에게 에러가 노출되지 않습니다.
Q5. CMS에서 콘텐츠를 발행하는 즉시 웹사이트에 반영하려면 어떤 방식이 가장 적합한가?
💡 CMS 웹훅 → revalidatePath/revalidateTag 패턴이 최적입니다. 평소에는 캐시된 정적 페이지를 빠르게 서빙하고, 콘텐츠 변경 시에만 해당 페이지를 즉시 재생성합니다. SSR 전환이나 전체 재빌드보다 훨씬 효율적입니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.