React vs Next.js 선택 가이드 2026 — 프로젝트에 맞는 프레임워크 고르기

React와 Next.js — 무엇이 다른가

React는 UI를 구성하는 라이브러리입니다. Next.js는 React를 기반으로 한 풀스택 프레임워크입니다. 무엇을 선택하느냐는 프로젝트의 성격, 팀 규모, SEO 요구사항에 따라 달라집니다.

---

핵심 차이 비교

---

렌더링 방식 이해

CSR (클라이언트 사이드 렌더링) — React SPA

1. 브라우저 → 서버 요청
2. 서버 → 빈 HTML + JS 번들 반환
3. 브라우저가 JS 실행
4. React가 DOM 구성 (화면 표시)
5. 데이터 API 호출 → 화면 업데이트

특징:

• 첫 페이지 로드 느림 (JS 파싱 대기)
• 이후 페이지 전환 빠름 (클라이언트 탐색)
• SEO 제한 (크롤러가 JS 실행 안 할 수 있음)
• 서버 부담 없음 (정적 파일 배포)

SSR (서버 사이드 렌더링) — Next.js

1. 브라우저 → 서버 요청
2. 서버 → 데이터 패칭 + React 렌더링
3. 완성된 HTML 반환
4. 브라우저 화면 즉시 표시
5. JS 로드 후 Hydration (인터랙션 활성화)

특징:

• 첫 페이지 로드 빠름 (완성된 HTML)
• SEO 우수
• 서버 리소스 필요
• 동적 데이터를 포함한 페이지에 적합

SSG (정적 사이트 생성) — Next.js

빌드 시점:
1. 모든 페이지 미리 렌더링 → HTML 파일 생성
2. CDN에 배포

요청 시:
→ CDN에서 즉시 HTML 반환 (서버 연산 없음)

특징:

• 가장 빠른 로딩 속도
• SEO 최고
• 빌드 시 데이터가 고정 (자주 변경되지 않는 콘텐츠에 적합)
• 서버 비용 거의 없음

---

React + Vite 기본 설정

# 새 프로젝트 생성
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

// src/App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}

// src/pages/Home.tsx — 데이터 패칭 (클라이언트)
import { useEffect, useState } from 'react'

export default function Home() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch('/api/posts')
      .then(r => r.json())
      .then(setPosts)
  }, [])

  return <div>{posts.map(p => <p key={p.id}>{p.title}</p>)}</div>
}

---

Next.js App Router 기본 설정

# 새 프로젝트 생성
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npm run dev

// app/page.tsx — 서버 컴포넌트 (기본값)
// 서버에서 실행 → 완성된 HTML 반환 → SEO 우수
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 }  // 1시간마다 재검증 (ISR)
  })
  return res.json()
}

export default async function HomePage() {
  const posts = await getPosts()  // 서버에서 직접 데이터 패칭

  return (
    <main>
      {posts.map((post: Post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </main>
  )
}

// app/posts/[slug]/page.tsx — 정적 생성 (SSG)
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json())
  return posts.map((post: Post) => ({ slug: post.slug }))
}

export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const post = await fetch(`https://api.example.com/posts/${slug}`).then(r => r.json())

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  )
}

---

프로젝트 유형별 선택 가이드

React SPA가 적합한 경우

# React SPA 배포: 정적 파일만 서버 필요
npm run build → dist/ 폴더 → S3 + CloudFront 또는 Netlify/Vercel

Next.js가 적합한 경우

---

Next.js App Router 서버/클라이언트 컴포넌트

App Router의 핵심 개념: 기본적으로 모든 컴포넌트는 서버 컴포넌트입니다.

// 서버 컴포넌트 (기본값)
// - DB 직접 접근 가능
// - 번들 크기에 포함 안 됨
// - useState, useEffect 사용 불가
// - 클릭 이벤트 핸들러 사용 불가

export default async function ProductList() {
  // 서버에서 직접 DB 쿼리
  const products = await db.query('SELECT * FROM products LIMIT 20')

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  )
}

// 클라이언트 컴포넌트
// 'use client' 지시문 필요
// - useState, useEffect 사용 가능
// - 브라우저 API 접근 가능
// - 이벤트 핸들러 사용 가능

'use client'
import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  )
}

// 혼합 패턴: 서버 컴포넌트가 클라이언트 컴포넌트를 포함
// app/page.tsx (서버 컴포넌트)
import { Counter } from '@/components/Counter'  // 클라이언트 컴포넌트

export default async function Page() {
  const data = await fetchData()  // 서버에서 데이터 패칭

  return (
    <div>
      <h1>{data.title}</h1>    {/* 서버에서 렌더링 */}
      <Counter />               {/* 클라이언트에서 인터랙션 */}
    </div>
  )
}

---

성능 비교

첫 로딩 (LCP 기준)

React SPA (Vite):
→ JS 번들 다운로드 → 파싱 → React 초기화 → API 호출 → 렌더링
→ LCP: 2~4초 (네트워크, 번들 크기에 따라)

Next.js SSG:
→ CDN에서 완성된 HTML 즉시 반환 → CSS 적용
→ LCP: 0.5~1초

Next.js SSR:
→ 서버에서 데이터 패칭 + 렌더링 → 완성된 HTML 반환
→ LCP: 1~2초 (서버 응답 시간에 따라)

번들 크기

# React + Vite (기본 설정)
dist/assets/index-xxx.js   ~150KB (gzip)

# Next.js App Router
_app.js                    ~90KB (gzip)  # 공통 런타임
page.js (서버 컴포넌트)    ~5KB           # 클라이언트로 보내지 않음!

# 서버 컴포넌트는 번들에 포함 안 됨 → 클라이언트 JS 크기 대폭 감소

---

마이그레이션: React SPA → Next.js

단계별 전환 전략

# 1. 새 Next.js 프로젝트 생성
npx create-next-app@latest my-app-next --typescript --app

# 2. 기존 React 컴포넌트 이동
# src/components/ → 그대로 재사용 가능
# src/pages/ → app/ 라우팅 구조로 변환

# 3. 라우팅 변환
# React Router: <Route path="/about"> → app/about/page.tsx

# 4. 데이터 패칭 변환
# useEffect + fetch → async 서버 컴포넌트
# (클라이언트 상태 필요 시 그대로 유지)

점진적 전환 (Incremental Migration)

Next.js는 기존 React SPA를 내부에 포함하는 방식으로 점진적 전환이 가능합니다.

// app/legacy/[[...slug]]/page.tsx
// 기존 React SPA를 Next.js 안에서 iframe 또는 별도 경로로 운영

'use client'
export default function LegacyApp() {
  // 기존 SPA 페이지들을 이 경로에서 처리
  return <div id="react-root" />
}

---

2026년 현황

결론

SEO 중요한 퍼블릭 사이트 → Next.js
인증 필요한 내부 도구 → React + Vite
블로그, 콘텐츠 사이트 → Next.js (SSG)
e커머스 → Next.js
관리자 패널, 대시보드 → React + Vite
취업용 포트폴리오 → Next.js (SEO 이점)

관련 글: Next.js SSG 완전 가이드 · Next.js + MDX 블로그 만들기 · Vercel 무료 배포 완전 가이드