Question 1

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

Accepted Answer

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

Question 2

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

Accepted Answer

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

Question 3

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

Accepted Answer

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

Next.js 데이터 페칭

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

답변

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

답변

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

답변

매시간 재검증으로 ISR(Incremental Static Regeneration)을 구현하는 방법은?

페이지 레벨에서 'export const revalidate = 60' 내보내기는 무엇을 하나요?

기타 React / Next.js 면접 주제

JavaScript 기초

React 기초

React Hooks

컴포넌트 라이프사이클

React Router

Context를 활용한 상태 관리

폼과 Controlled Components

데이터 가져오기 및 API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js 기초

TypeScript와 React

Next.js Server Actions

Next.js 라우팅 및 내비게이션

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware 및 Auth

React 테스트

Zustand State Management

React 성능 최적화

Error Boundaries & 에러 핸들링

Advanced React Patterns

Next.js 고급 기능

Next.js 배포 및 프로덕션

아키텍처 & 디자인 패턴

React Server Components

Next.js 국제화

React 보안 & 모범 사례

다음 면접을 위해 React / Next.js을 마스터하세요