Question 1

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

Accepted Answer

Next.js는 여러 렌더링 전략을 지원합니다. **SSR (Server-Side Rendering):** - 매 요청마다 서버에서 HTML을 생성 - 항상 최신 데이터를 보여줌 - TTFB가 SSG보다 느림 **SSG (Static Site Generation):** - 빌드 시점에 HTML을 미리 생성 - CDN에서 제공하므로 가장 빠름 - 데이터가 자주 변하지 않는 페이지에 적합 **ISR (Incremental Static Regeneration):** - SSG의 장점 + 주기적 재생성 - `revalidate` 시간 설정으로 백그라운드에서 갱신 ```typescript // App Router 예시 // SSG (기본) export default async function Page() { const data = await fetch('https://api.example.com/data'); return

{/* ... */}

; } // I

Question 2

Server Component와 Client Component의 차이점은?

Accepted Answer

Next.js App Router에서 컴포넌트는 기본적으로 Server Component입니다. ```typescript // Server Component (기본) - 서버에서만 실행 async function ServerComp() { const data = await db.query('SELECT * FROM users'); return

{u.name}

; } // Client Component - 'use client' 지시어 필요 'use client'; import { useState } from 'react'; function ClientComp() { const [count, setCount] = useState(0); return ; } ``` | 특성 | S

Question 3

Next.js App Router의 파일 기반 라우팅을 설명해주세요.

Accepted Answer

App Router는 `app` 디렉토리의 폴더 구조가 곧 URL 구조입니다.

```
app/
├── page.tsx           → /
├── layout.tsx         → 모든 페이지의 공통 레이아웃
├── loading.tsx        → 로딩 UI (Suspense)
├── error.tsx          → 에러 UI (Error Boundary)
├── not-found.tsx      → 404 페이지
├── about/
│   └── page.tsx       → /about
├── blog/
│   ├── page.tsx       → /blog
│   └── [slug]/
│       └── page.tsx   → /blog/:slug (동적 라우트)
└── api/
    └── users/
        └── route.ts   → /api/users (API Route)
```

- **layout.tsx**: 하위 라우트가 공유하는 레

Question 4

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

Accepted Answer

Next.js App Router에서는 확장된 fetch API를 사용하여 데이터 패칭과 캐싱을 제어합니다.

```typescript
// 캐시됨 (기본) - SSG와 유사
const data = await fetch('https://api.example.com/data');

// 캐시 안함 - SSR과 유사
const data = await fetch('https://api.example.com/data', {
  cache: 'no-store',
});

// 시간 기반 재검증 - ISR과 유사
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }, // 1시간
});

// 온디맨드 재검증 (Server Action)
import { revalidatePath, revalidateTag } from 'next/cache';

async function updatePost(

Question 5

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

Accepted Answer

Middleware는 요청이 완료되기 전에 실행되는 코드로, Edge Runtime에서 동작합니다.

```typescript
// middleware.ts (프로젝트 루트)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 인증 확인
  const token = request.cookies.get('auth-token');
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

// 헤더 추가
  const response = NextResponse.next();
  res

Question 6

Server Actions란 무엇이며 어떻게 사용하나요?

Accepted Answer

Server Actions는 클라이언트에서 직접 호출할 수 있는 서버 측 함수입니다. API Route를 만들지 않고도 서버 로직을 실행할 수 있습니다. ```typescript // Server Action 정의 async function createPost(formData: FormData) { 'use server'; const title = formData.get('title') as string; const content = formData.get('content') as string; await db.posts.create({ title, content }); revalidatePath('/posts'); } // 폼에서 사용 function CreatePostForm() { return (

Question 7

Parallel Routes와 Intercepting Routes를 설명해주세요.

Accepted Answer

**Parallel Routes (@슬롯):** 하나의 레이아웃에서 여러 페이지를 동시에 렌더링합니다. ``` app/ layout.tsx → { children, analytics, team } page.tsx @analytics/ page.tsx @team/ page.tsx ``` ```tsx // app/layout.tsx export default function Layout({ children, analytics, team }) { return ( <> {children} {analytics} {team} ); } ``` - 각 슬롯은 독립적으로 로딩/에러 상태를 가질 수 있음 - 대시보드, 멀티 패널 UI에 적합 - `default.tsx`로 매칭되지 않는 슬롯의 폴백 정의 **Intercepting Routes ((..), (..)(..), (...)):** 현재 레

Question 8

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

Accepted Answer

Route Handlers는 App Router에서 API 엔드포인트를 구현하는 새로운 방식입니다.

**Route Handlers (App Router):**
```typescript
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const users = await db.user.findMany();
  return NextResponse.json(users);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const user = await db.user.create({ data: body });
  return NextResponse.json(user, { status

Question 9

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

Accepted Answer

App Router의 Metadata API로 페이지별 메타데이터를 선언적으로 관리합니다.

**정적 메타데이터:**
```typescript
// app/about/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: '소개 | 프딥',
  description: '프론트엔드 기술면접 준비 서비스',
  openGraph: {
    title: '프딥 - 프론트엔드 딥하게',
    images: ['/og-image.png'],
  },
};
```

**동적 메타데이터:**
```typescript
// app/questions/[id]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const question = await getQuestion(params.id);
  re

Question 10

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

Accepted Answer

**Streaming SSR**은 HTML을 한 번에 보내지 않고 준비된 부분부터 점진적으로 전송하는 기법입니다. React 18의 `Suspense`가 이를 가능하게 합니다. **기존 SSR의 문제:** 1. 서버에서 모든 데이터 fetch 완료 대기 2. 전체 HTML 렌더링 3. 클라이언트에 전체 HTML 전송 4. 전체 hydration → 가장 느린 컴포넌트가 전체를 지연 **Streaming SSR:** ```tsx // app/page.tsx (Next.js App Router) export default function Page() { return ( <>

{/* 즉시 전송 */} }> {/* 데이터 준비되면 스트리밍 */}

Next.js

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

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

03Next.js App Router의 파일 기반 라우팅을 설명해주세요.쉬움라우팅

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

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

06Server Actions란 무엇이며 어떻게 사용하나요?어려움Server Actions

07Parallel Routes와 Intercepting Routes를 설명해주세요.어려움App Router

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

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

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