데이터 페칭 기초 — fetch API, 캐싱 전략, 재검증
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js에서 fetch 요청에 `next: { revalidate: 60 }`를 설정했을 때의 동작은?
💡 next: { revalidate: N }은 Incremental Static Regeneration(ISR)으로, N초 후 다음 요청 시 백그라운드에서 데이터를 새로 가져옵니다. 사용자는 우선 캐시된 응답을 받습니다.
Q2. 실시간으로 변하는 주식 데이터를 페칭할 때 가장 적합한 캐시 옵션은?
💡 cache: "no-store"는 캐시를 전혀 사용하지 않아 매 요청마다 최신 데이터를 가져옵니다. 실시간 데이터(주식, 환율, 채팅)에 적합합니다.
Q3. 서버 컴포넌트에서 여러 독립적인 데이터를 효율적으로 페칭하는 올바른 방법은?
💡 Promise.all()을 사용하면 여러 fetch 요청이 동시에 시작됩니다. 가장 오래 걸리는 요청 시간만큼만 기다리므로 순차 fetch보다 훨씬 빠릅니다.
Q4. `next: { tags: ["posts"] }`로 태그를 설정한 fetch 캐시를 수동으로 무효화하려면?
💡 revalidateTag("posts")를 Server Action 또는 Route Handler에서 호출하면 해당 태그가 붙은 모든 fetch 캐시가 무효화됩니다.
Q5. Next.js에서 같은 렌더링 사이클에 동일한 URL의 fetch를 여러 컴포넌트에서 호출하면 어떻게 동작하는가?
💡 Next.js는 같은 렌더링 패스(pass)에서 동일한 URL과 옵션의 fetch를 자동으로 메모이제이션합니다. 여러 컴포넌트에서 같은 데이터를 fetch해도 실제 HTTP 요청은 한 번만 발생합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.