학습 공간 개념 · 판단 · 실험

Fanta Lab

질문 103 · 실전 면접 답변

Next.js는 React에 어떤 기능과 아키텍처를 더하나요?

이렇게 답해 보세요 (핵심 답변)

Next.js는 UI 라이브러리인 React 위에 파일 기반 라우팅, 서버 렌더링(SSR)·정적 생성(SSG)·스트리밍, 데이터 패칭 및 번들 최적화 구성을 통합해 제공하는 풀스택 웹 프레임워크입니다. 페이지나 컴포넌트 성격에 따라 서버에서 미리 HTML과 데이터를 준비해 초기 표시 속도와 검색 노출을 개선하고, 상호작용이 필요한 부분만 클라이언트 컴포넌트로 분리해 전달할 수 있습니다. 다만 사용하는 라우터 방식(Pages Router vs App Router)과 버전에 따라 서버·클라이언트 경계와 캐싱 동작이 다르므로 프로젝트 기준을 명확히 이해하고 설계해야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

  1. 라우터·번들러·서버 렌더링 파이프라인을 매번 직접 조합하는 비용을 줄이고 팀의 표준 구조를 빠르게 잡을 수 있습니다.
  2. 서버에서 실행되는 컴포넌트 코드에서는 window나 localStorage 같은 브라우저 전용 API를 직접 호출할 수 없으므로 실행 환경 경계를 구분해야 합니다.

면접에서 자주 하는 실수

Next.js를 사용한다고 해서 모든 페이지가 무조건 매 요청마다 서버에서 동적으로 SSR되는 것은 아니며 정적 생성과 클라이언트 렌더링이 함께 조합됩니다.

원리와 예제까지 읽기

공식 참고 자료

질문 목록 출처 ↗ · 원본 103번을 바탕으로 질문과 답변을 새로 정리했습니다.

← 프론트엔드 설계