서버 컴포넌트에서 fetch와 캐싱 동작: SSR, SSG, ISR 관점에서 정리
Next.js(App Router)를 활용하여 프로젝트를 진행하다 보면, 서버 컴포넌트(Server Component)에서 데이터를 가져올 때 어떤 방식으로 캐싱이 이루어지는지 혼란스러울 수 있다. 특히 fetch 옵션(force-cache, no-store, revalidate)에 따라 SSR, SSG, ISR이 어떻게 구현되는지, 그리고 데이터베이스를 직접 호출할 경우에는 어떤 차이가 있는지가 중요한 쟁점이 된다.이 글은 이러한 질문에서 출발하여, Next.js 서버 컴포넌트에서의 데이터 패칭과 캐싱 동작을 SSR·SSG·ISR 관점에서 정리한 것이다.질문 1.서버 컴포넌트에서 fetch 함수에 force-cache 옵션을 부여하고 빌드를 수행하면, 빌드 시점에 해당 경로로부터 데이터를 가져와 결과물..
2025. 9. 13.