nextjs
CHAPTER 17 / 34
읽기 약 2분
SYNTAX
Data Fetching 해부: fetch & cache
핵심 개념
Next.js는 fetch API를 확장하여 캐싱을 지원합니다. cache: "no-store"로 SSR, cache: "force-cache"로 SSG처럼 동작합니다. revalidate로 ISR을 구현합니다.
코드 분석
DATA FETCHING
// SSR — 매 요청마다 새로 가져옴
const data = await fetch('/api/units', {
cache: 'no-store'
})
// SSG — 빌드 시 한 번만
const data = await fetch('/api/units', {
cache: 'force-cache'
})
// ISR — 60초마다 갱신
const data = await fetch('/api/units', {
next: { revalidate: 60 }
})AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Data Fetching' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Data Fetching'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Data Fetching' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Data Fetching' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Data Fetching 해부: fetch & cache는 이 3가지만 확실히 잡으세요
1.Server Component에서 API를 호출할 때 캐싱 전략을 설정하지 않으면 매 요청마다 데이터를 새로 가져와서 성능이 저하됩니다
2.fetch의 cache 옵션으로 force-cache(정적), no-store(동적), revalidate(ISR)를 제어합니다
3.다음 챕터에서 프로젝트 전체 설정을 결정하는 next.config.ts를 배웁니다
공유하기
진행도 17 / 34