# Next.js 데이터 페칭 (React / Next.js)

> 서버 사이드 렌더링(SSR), 정적 생성(SSG), 점진적 정적 재생성(ISR), 스트리밍

- 24 면접 질문
- Mid-Level
- [면접 질문: React / Next.js](https://sharpskill.dev/ko/technologies/react-next/interview-questions.md)

## 1. Next.js App Router의 Server Components에서 데이터 페칭의 기본 동작은 무엇인가요?

**답변**

Server Components는 기본적으로 각 요청마다 서버에서 데이터 페칭을 수행하여 항상 최신 데이터를 보장합니다. getServerSideProps가 필요했던 Pages Router와 달리 Server Components는 SSR을 암묵적으로 만듭니다. 정적 캐싱을 위해서는 fetch에 cache: 'force-cache' 옵션을 추가해야 합니다.

## 2. Pages Router의 getStaticProps와 동일한 fetch 캐시 옵션은 무엇인가요?

**답변**

cache: 'force-cache' 옵션은 Next.js에게 수동으로 무효화될 때까지 응답을 캐시하도록 지시하며, getStaticProps와 동일합니다. 이 전략은 무기한 캐시되는 정적 콘텐츠를 생성합니다. 'no-store' 옵션은 getServerSideProps(모든 요청마다 재페칭)와 같고, next.revalidate는 revalidate가 있는 getStaticProps(ISR)와 같습니다.

## 3. 매 요청마다 동적 데이터 페칭을 강제하는 방법은 무엇인가요(getServerSideProps 동일)?

**답변**

cache: 'no-store' 옵션은 캐싱을 완전히 비활성화하고 모든 요청에서 재페칭을 강제하여 getServerSideProps와 동일합니다. 이 전략은 항상 최신 데이터를 보장하지만 지연 시간이 증가합니다. 신선도가 중요한 실시간 데이터(대시보드, 알림, 실시간 가격)에 사용하세요.

## 21개 추가 질문 이용 가능

- 매시간 재검증으로 ISR(Incremental Static Regeneration)을 구현하는 방법은?
- 페이지 레벨에서 'export const revalidate = 60' 내보내기는 무엇을 하나요?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 React / Next.js 면접 주제

- [JavaScript 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/javascript-essentials.md): 25개 질문, Junior
- [React 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-fundamentals.md): 20개 질문, Junior
- [React Hooks](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-hooks.md): 22개 질문, Junior
- [컴포넌트 라이프사이클](https://sharpskill.dev/ko/technologies/react-next/interview-questions/component-lifecycle.md): 18개 질문, Junior
- [React Router](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-router.md): 20개 질문, Junior
- [Context를 활용한 상태 관리](https://sharpskill.dev/ko/technologies/react-next/interview-questions/state-management-context.md): 18개 질문, Junior
- [폼과 Controlled Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/forms-controlled-components.md): 20개 질문, Mid-Level
- [데이터 가져오기 및 API](https://sharpskill.dev/ko/technologies/react-next/interview-questions/fetching-data-api.md): 20개 질문, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-query-tanstack.md): 20개 질문, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/ko/technologies/react-next/interview-questions/styling-css-in-js.md): 18개 질문, Mid-Level
- [Next.js 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25개 질문, Mid-Level
- [TypeScript와 React](https://sharpskill.dev/ko/technologies/react-next/interview-questions/typescript-react.md): 20개 질문, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-server-actions.md): 20개 질문, Mid-Level
- [Next.js 라우팅 및 내비게이션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22개 질문, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-api-routes.md): 20개 질문, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18개 질문, Mid-Level
- [Next.js Middleware 및 Auth](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22개 질문, Mid-Level
- [React 테스트](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-testing.md): 20개 질문, Mid-Level
- [Zustand State Management](https://sharpskill.dev/ko/technologies/react-next/interview-questions/zustand-state-management.md): 18개 질문, Mid-Level
- [React 성능 최적화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-performance-optimization.md): 22개 질문, Senior
- [Error Boundaries & 에러 핸들링](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-error-boundaries.md): 18개 질문, Senior
- [Advanced React Patterns](https://sharpskill.dev/ko/technologies/react-next/interview-questions/advanced-react-patterns.md): 20개 질문, Senior
- [Next.js 고급 기능](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24개 질문, Senior
- [Next.js 배포 및 프로덕션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20개 질문, Senior
- [아키텍처 & 디자인 패턴](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-architecture-patterns.md): 22개 질문, Senior
- [React Server Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-server-components.md): 26개 질문, Senior
- [Next.js 국제화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-internationalization.md): 20개 질문, Senior
- [React 보안 & 모범 사례](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-security-best-practices.md): 22개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-data-fetching