Question 1

SSR, SSG, ISR의 차이점을 설명해주세요.

Accepted Answer

세 가지 모두 **HTML을 언제 만드느냐**의 차이입니다.

### **SSR (Server-Side Rendering)**

**매 요청마다** 서버에서 HTML을 생성합니다. 항상 최신 데이터를 보여줄 수 있지만, 요청마다 서버 작업이 필요해서 첫 바이트 응답(TTFB)이 정적 방식보다 느리고 서버 비용이 듭니다.

### **SSG (Static Site Generation)**

**빌드 시점에** HTML을 미리 만들어 둡니다. 완성된 파일을 CDN에서 그대로 내려주므로 가장 빠르지만, 내용을 바꾸려면 다시 빌드해야 합니다. 데이터가 자주 변하지 않는 페이지에 적합합니다.

### **ISR (Incremental Static Regeneration)**

SSG처럼 정적으로 서빙하되, **설정한 주기(revalidate)가 지나면 백그라운드에서 페이지를 다시 생성**합니다. 재배포 없이 내용이 갱신되는 SSG와 SSR의 절충안입니다.

### **App Router에서의

Question 2

Server Component와 Client Component의 차이점은?

Accepted Answer

App Router에서 컴포넌트는 **기본이 Server Component**이고, 상호작용이 필요한 곳에만 `'use client'`를 선언해 Client Component로 만듭니다.

### **Server Component**

**서버에서만 실행**됩니다. DB 쿼리나 파일 시스템에 직접 접근할 수 있고, 그 코드는 **클라이언트 JS 번들에 포함되지 않습니다.** 무거운 라이브러리를 서버에 두면 번들이 그만큼 줄어듭니다.

대신 **상태와 이벤트를 가질 수 없습니다** — useState, onClick, 브라우저 API는 사용할 수 없습니다.

### **Client Component**

파일 상단에 `'use client'`를 선언하면 됩니다. 상태·이벤트·브라우저 API를 쓸 수 있는 대신, 코드가 **클라이언트 번들에 포함되고 hydration 대상**이 됩니다.

### **핵심 원칙**

- **Server Component를 기본**으로 쓰고, 상호작용이 필

Question 3

Next.js의 데이터 패칭과 캐싱 전략을 설명해주세요.

Accepted Answer

App Router는 **확장된 fetch API의 옵션으로** 데이터 캐싱을 제어합니다.

### **fetch 캐싱 옵션**

- **캐시 사용** — 빌드 시점 데이터로 고정되어 SSG처럼 동작합니다.
- **캐시 안 함(no-store)** — 요청마다 새로 가져와 SSR처럼 동작합니다.
- **시간 기반 재검증(revalidate)** — 지정한 시간이 지나면 백그라운드에서 갱신되어 ISR처럼 동작합니다.

### **온디맨드 재검증**

시간 주기가 아니라 **데이터가 실제로 바뀐 순간** 갱신하고 싶으면, 데이터를 변경하는 Server Action이나 Route Handler에서 `revalidatePath`(경로 기준)나 `revalidateTag`(태그 기준)를 호출합니다. 글을 수정하면 그 글 페이지만 즉시 갱신하는 식입니다.

### **알아둘 것**

- 같은 렌더링 중 **동일한 fetch 요청은 자동으로 중복 제거**됩니다. 여러 컴포넌트가 같은 데이터를 각

Question 4

Next.js Middleware는 무엇이고 어떤 용도로 사용하나요?

Accepted Answer

Middleware는 **요청이 페이지나 API에 도달하기 전에 실행되는 코드**입니다. 프로젝트 루트의 `middleware.ts`에 정의하고, `matcher` 설정으로 어떤 경로에서 실행할지 지정합니다.

### **무엇을 할 수 있나**

요청(쿠키·헤더·URL)을 읽고, **응답을 가로채서** 리다이렉트하거나, 요청을 다른 곳으로 rewrite하거나, 헤더를 추가한 뒤 통과시킬 수 있습니다.

### **주요 용도**

- **인증·인가** — 보호된 경로에서 인증 쿠키를 확인하고 없으면 로그인 페이지로 리다이렉트합니다. 페이지마다 검사 코드를 두지 않고 **경로 단위로 한 곳에서** 접근을 막을 수 있습니다.
- **조건부 리다이렉트** — 국가·디바이스·상태에 따라 다른 경로로 보냅니다.
- **A/B 테스트** — 같은 URL에서 사용자 그룹에 따라 다른 버전을 rewrite로 제공합니다.
- **다국어(i18n)** — 사용자 로케일을 감지해 언어별 경로로 보냅니다.

Question 5

Next.js Route Handlers와 기존 API Routes의 차이점은?

Accepted Answer

Route Handlers는 **App Router에서 API 엔드포인트를 만드는 방식**입니다. `app` 디렉토리 안에 `route.ts` 파일을 두고, 기존 API Routes(`pages/api`)를 대체합니다.

### **주요 차이**

- **메서드 분리** — 기존에는 하나의 handler 안에서 `req.method`로 분기했지만, Route Handlers는 **GET, POST 같은 HTTP 메서드 이름의 함수를 각각 export**합니다. 코드가 메서드별로 자연스럽게 나뉩니다.
- **표준 Web API 기반** — Node.js 고유의 req/res 객체 대신 **웹 표준 Request/Response**를 사용합니다. 표준 기반이라 Edge Runtime에서도 동일하게 동작합니다.
- **캐싱** — 기존 API Routes에는 캐싱 개념이 없었지만, Route Handlers의 GET은 fetch와 같은 캐싱 체계에 참여할 수 있습니다. 단, **Next.

Question 6

Streaming SSR과 React Suspense의 관계를 설명해주세요.

Accepted Answer

Streaming SSR은 **HTML을 한 번에 보내지 않고 준비된 부분부터 점진적으로 전송**하는 방식이고, React 18의 Suspense가 그 경계를 정의합니다.

### **기존 SSR의 문제**

서버가 **모든 데이터를 다 기다린 뒤에야** 완성된 HTML을 한 번에 보냅니다. 가장 느린 데이터 하나가 페이지 전체의 첫 응답을 지연시킵니다.

### **Streaming SSR의 동작**

느린 부분을 Suspense로 감싸두면:

- 서버는 Suspense **바깥 콘텐츠와 fallback(스켈레톤)을 즉시 전송**하고, 브라우저는 바로 그리기 시작합니다 — TTFB와 FCP가 개선됩니다.
- 느린 데이터가 준비되면 그 부분의 HTML **청크를 이어서 전송**하고, 브라우저가 fallback을 실제 콘텐츠로 교체합니다.
- hydration도 통째로 하지 않고 **사용자가 상호작용하는 영역부터** 진행합니다(선택적 하이드레이션).

### **Suspense의 역할

Question 7

Next.js Metadata API와 SEO 최적화 전략을 설명해주세요.

Accepted Answer

App Router의 Metadata API는 **페이지별 메타데이터를 선언적으로, 타입 안전하게** 관리하는 방법입니다.

### **정적 / 동적 메타데이터**

- 내용이 고정된 페이지는 **`metadata` 객체를 export**해서 title, description, openGraph 등을 선언합니다.
- 데이터에 따라 달라지는 페이지(상세 페이지 등)는 **`generateMetadata` 함수**를 export합니다. params로 데이터를 조회해 제목과 설명을 만들어 반환하면 됩니다.

### **레이아웃과의 관계**

메타데이터는 **layout에서 기본값을 정의하고 개별 page에서 오버라이드**하는 계층 구조입니다. `title.template`을 레이아웃에 두면 하위 페이지 제목이 "페이지명 | 서비스명" 형태로 일관되게 조합됩니다.

### **SEO 최적화 전략**

메타 태그 외에 파일 컨벤션으로 SEO 요소를 함께 관리합니다.

- **sitemap.t

Question 8

loading.tsx와 error.tsx의 동작 원리를 설명해주세요.

Accepted Answer

둘 다 App Router의 **파일 컨벤션으로 React의 경계 컴포넌트를 자동 생성**하는 장치입니다.

### **loading.tsx**

그 세그먼트를 **자동으로 Suspense로 감싸고**, 서버 컴포넌트가 데이터를 기다리는 동안 이 파일의 UI(스켈레톤 등)를 보여줍니다.

- Streaming SSR과 결합되어, 로딩 UI가 먼저 전송되고 콘텐츠가 준비되면 교체됩니다.
- **중첩 라우트에서 세그먼트마다 독립적인 로딩 UI**를 가질 수 있습니다 — 대시보드 전체가 아니라 느린 패널만 스켈레톤이 뜨게 만들 수 있습니다.

### **error.tsx**

그 세그먼트를 **자동으로 Error Boundary로 감쌉니다.** 렌더링 중 에러가 나면 페이지 전체가 죽는 대신 이 파일의 폴백 UI가 표시됩니다.

- **반드시 Client Component**여야 합니다(`'use client'`). 에러 상태를 담고 재시도 버튼 같은 상호작용이 필요하기 때문입니다.
-

Question 9

Next.js Image 컴포넌트의 최적화 전략을 상세히 설명해주세요.

Accepted Answer

`next/image`는 이미지를 **요청 시점에 자동으로 최적화**해서 성능 문제의 큰 축인 이미지 비용을 줄입니다.

### **자동으로 해주는 것**

- **포맷 변환** — 브라우저가 지원하면 WebP/AVIF로 변환해 전송량을 줄입니다.
- **리사이징** — 요청된 표시 크기에 맞게 서버에서 줄여 보냅니다. 원본 대형 이미지가 그대로 내려가는 일을 막습니다.
- **Lazy Loading** — 기본값으로 뷰포트에 들어올 때만 로드합니다.
- **CLS 방지** — width/height(또는 fill)로 자리를 미리 확보해 이미지 로드 시 레이아웃이 밀리지 않게 합니다.
- **반응형** — sizes 힌트에 따라 디바이스별로 적절한 해상도를 고르는 srcset을 생성합니다.

### **핵심 속성**

- **priority** — LCP에 해당하는 히어로 이미지에 붙입니다. lazy 대신 preload되어 최대 콘텐츠풀 페인트가 앞당겨집니다.
- **placehol

Question 10

넥스트.js를 사용하는 이유와 장점은 무엇인가요?

Accepted Answer

Next.js는 React 기반 **풀스택 프레임워크**입니다. React는 UI 라이브러리일 뿐이라 라우팅·번들링·SSR·데이터 패칭을 직접 조립해야 하는데, Next.js는 이것들을 **의견을 가진 기본값**으로 통합 제공합니다.

### **핵심 장점**

**1. 렌더링 전략을 페이지·컴포넌트 단위로 선택**

정적 콘텐츠는 SSG, 주기적으로 갱신되는 목록은 ISR, 개인화 화면은 SSR, 인증 뒤 상호작용 화면은 CSR — **한 앱 안에서 섞어 쓸 수 있다는 것**이 핵심입니다.

**2. React Server Components**

서버에서만 실행되는 컴포넌트로 DB에 직접 접근하고, 그 코드는 **클라이언트 번들에 포함되지 않습니다.** 무거운 파서나 유틸 라이브러리를 서버에 두면 번들이 그만큼 줄어듭니다.

**3. 파일 기반 라우팅** — 폴더 구조가 곧 URL이고, layout.tsx로 중첩 레이아웃이 상태를 유지한 채 공유됩니다.

**4. 내장 최적화**

Next.js

01SSR, SSG, ISR의 차이점을 설명해주세요.보통렌더링

02Server Component와 Client Component의 차이점은?보통App Router

03Next.js의 데이터 패칭과 캐싱 전략을 설명해주세요.보통데이터 패칭

04Next.js Middleware는 무엇이고 어떤 용도로 사용하나요?보통미들웨어

05Next.js Route Handlers와 기존 API Routes의 차이점은?보통App Router

06Streaming SSR과 React Suspense의 관계를 설명해주세요.보통렌더링

07Next.js Metadata API와 SEO 최적화 전략을 설명해주세요.보통SEO

08loading.tsx와 error.tsx의 동작 원리를 설명해주세요.보통App Router

09Next.js Image 컴포넌트의 최적화 전략을 상세히 설명해주세요.보통최적화

10넥스트.js를 사용하는 이유와 장점은 무엇인가요?보통핵심 개념