프론트엔드 면접 질문 모음 (7)

짜장킴·2025년 11월 6일

면접

목록 보기

7/9

Next.js는 React에 없는 기능을 프레임워크 수준에서 제공하여
운영성과 성능이 뛰어난 웹 애플리케이션을 빠르게 구축할 수 있게 해줍니다. React는 UI 라이브러리이기 때문에 라우팅, 서버 렌더링, 데이터 패칭, 최적화 같은 기능을 직접 설정해야 하지만, Next.js는 CSR 뿐만 아니라 SSR/SSG/ISR를 지원해 초기 렌더링 속도와 SEO를 개선할 수 있습니다. 또한 파일 기반 라우팅, 이미지 최적화, 서버 컴포넌트, API 라우트 등도 기본으로 제공됩니다. 즉, Next.js는 React를 확장해 서버 렌더링, 라우팅, 성능 최적화까지 포함한 올인원 웹 프레임워크입니다.

서버 컴포넌트는 서버에서 렌더링되는 컴포넌트로, 서버 환경에서 직접 데이터 패칭이 가능하고 번들 크기를 줄여 성능을 최적화 할 수 있습니다.
렌더링된 HTML을 클라이언트에 전달하기 때문에 초기 로딩 속도와 SEO에 유리합니다. 다만 브라우저 환경이 아니므로 상태 관리, 이벤트 처리, DOM조작 같은 클라이언트 상호작용은 불가능합니다. 반면에 클라이언트 컴포너트는 브라우저에서 실행되는 컴포넌트로 useState, useEffet 같은 훅을 사용해 상태 관리와 이벤트 처리, DOM 조작이 가능합니다. 그러나 클라이언트 번들에 포함되기 때문에 번들 크기에 영향이 있고 초기 로드 비용이 더 큽니다.

Next.js의 App Router와 Pages Router의 가장 큰 차이는 구조와 렌더링 방식, 데이터 패칭 방식입니다. 먼저 파일 구조입니다. Pages Router는 pages/ 디렉토리를 사용하고 파일 기반 라우팅만 제공하지만, App Router는 app/ 디렉토리와 레이아웃 기반 라우팅 및 중첩 레이아웃을 지원해 페이지 공통 UI 구성이 더 쉽습니다. 두번째는 렌더링 방식입니다. Pages Router는 기본이 클라이언트 컴포넌트이고, 서버렌더링이 필요하면 getServerSideProps 등을 명시해야 합니다. 반면 App Router는 서버 컴포넌트가 기본이며, 필요한 경우에만 'use client'를 선언해 클라이언트 컴포넌트를 사용합니다. 세번째는 데이터 패칭 방식입니다. Pages Router는 getStaticProps, getServerSideProps 같은 특수 함수가 필요하지만, App Router는 서버 컴포넌트 내부에서 직접 fetch할 수 있고
Server Actions로 서버 로직을 처리할 수 있습니다. 정리하자면, Pages Router는 전통적인 CSR 기반 아키텍처이고, App Router는 서버 중심의 현대적 아키텍처로 성능과 확장성이 크게 향상된 방식입니다.

SPA와 MPA는 애플리케이션 구조 기준, CSR/SSR/SSG/ISR은 렌더링 시점과 위치 기준으로 구분됩니다. 즉, SPA/MPA는 페이지 전환 방식이고, 렌더링 방식들은 HTML을 어디서, 언제 생성하는지에 따라 나뉩니다.

SPA는 전체 앱이 하나의 HTML로 로드되고, 페이지 이동은 클라이언트 라우팅으로 처리합니다. 화면 전환이 빠르고 사용자 경험이 좋지만, 초기 JS 로드가 크고 SEO 대응이 상대적으로 어렵습니다. MPA는 페이지 이동 시마다 서버에서 새로운 HTML을 가져오는 방식입니다. 초기 로딩와 SEO에 유리하지만, 페이지 전환 시 새로고침이 발생합니다.

CSR은 서버가 기본 HTML과 JS 번들을 보내고, 브라우저가 JS를 실행하여 화면을 렌더링하는 방식입니다. 초기 로딩이 느릴 수 있지만, 한 번 로딩되면 페이지 전환이 빠르고 사용자 경험이 부드러운 것이 특징입니다. SSR은 요청 시 서버가 HTML을 생성해 전달하고, 브라우저는 전달된 HTML에 JS를 하이드레이션합니다. 초기 렌더링이 빠르고 SEO에 유리합니다. SSG는 빌드 시 HTML을 미리 생성해 제공하는 방식입니다. 매우 빠르고 비용 효율적이지만, 데이터 변경 시 재빌드가 필요합니다. ISR은 SSG처럼 정적으로 제공하되,일정 주기마다 백그라운드에서 페이지를 다시 생성합니다. 정적 페이지의 성능 + 최신 데이터 유지를 동시에 제공합니다.

Hydration은 서버에서 미리 렌더링된 HTML에 브라우저가 JS를 연결해 인터랙션이 가능하도록 만드는 과정입니다. 즉, SSR이나 SSG로 만든 정적인 HTML을 살려서 상태 관리, 이벤트 처리 같은 기능을 붙여 동적으로 동작하도록 만드는 단계입니다.

둘 다 Next.js에서 Next.js에서 데이터를 가져오는 방식이지만, 실행 시점과 렌더링 방식이 다릅니다. getStaticProps는 빌드 시점에 실행되어 정적 HTML 파일을 미리 생성하는 SSG 방식입니다. 요청 시마다 서버 연산이 필요 없기 때문에 응답 속도가 매우 빠르고 CDN 캐싱이 가능합니다.
다만, 빌드 이후 데이터가 바뀌면 반영이 어려워 자주 변경되지 않는 콘텐츠에 적합합니다. getServerSideProps는 요청 시마다 서버에서 실행되는 SSR 방식입니다. 매 요청마다 최신 데이터를 가져올 수 있어 동적 데이터에 적합하지만, 서버 계산이 필요하기 때문에 응답 속도가 느릴 수 있고 서버 부하가 증가할 수 있습니다.