2026-02-27

Next.js

Next.js란?

React 기반의 풀스택 프레임워크

• React + 서버 기능 + 라우팅 + 빌드 최적화까지 포함한 프레임워크

리액트와 비교

언제 쓰는지

• Next가 좋은 경우
  • SEO 중요
  • 블로그 / 커머스 / 기업 사이트
  • SSR 필요
  • 풀스택 빠르게 만들고 싶을 때
• React만 써도 되는 경우
  • 관리자 페이지
  • 내부 시스템
  • SEO 필요 없는 서비스

렌더링 방식 차이 (핵심)

• CSR (Client Side Rendering)
  • 브라우저가 JS 받아서 렌더링
  • 초기 로딩 느릴 수 있음
  • SEO 불리
  • React는 CSR
• SSR (Server Side Rendering)
  • 서버에서 HTML 미리 만들어서 보내줌
  • 초기 로딩 빠름
  • SEO 좋음
• SSG (Static Site Generation)
  • 빌드 시 미리 HTML 생성
  • 블로그, 랜딩 페이지에 적합

⇒ Next.js는 이걸 페이지 단위로 선택 가능

폴더 구조

https://nextjs.org/docs/app/getting-started/project-structure

Next 13+부터는 App Router가 기본

app/
  page.tsx        → /
  about/
    page.tsx      → /about
  layout.tsx      → 공통 레이아웃
  api/
    route.ts      → API 서버

• 파일 이름이 곧 URL
• React처럼 react-router 안 씀.
• APP Router
  • Layouts : 리렌더링 없이 경로 간 UI를 쉽게 공유
  • Server Components : 동적 애플리케이션의 경우 서버 우선 방식을 기본으로 설정
  • Streaming : 로딩 상태를 즉시 표시하며, 렌더링되는 대로 UI 스트리밍
  • Support for Data Fetching : 확장된 fetch API를 통해 유연하게 SSG, SSR, ISR 사용

서버 컴포넌트 vs 클라이언트 컴포넌트

Next는 기본이 Server Component

export default function Page() {
  return <div>Hello</div>;
} // 이건 서버에서 실행됨

서버컴포넌트

https://ko.react.dev/reference/rsc/server-components

• 리액트 18 버전에서 도입된 새로운 기능
• 서버에서만 렌더링되는 컴포넌트
• 서버에서만 실행되기 때문에 브라우저 쪽 번들 크기를 줄이고, 초기 로딩 속도를 개선
• 보안 측면에서도 강점 (DB정보나 API키를 클라이언트로 보내지 않아도 됨)
• 단점: 서버 의존성 증가, 사용자 경험과 인터랙션 문제 (실시간 업데이트나 드래그앤 드롭 등)
• → 서버컴포넌트는 정적 데이터에 적합

클라이언트 컴포넌트로 쓰려면?

"use client";

import { useState } from "react";

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

⇒ useState, useEffect 쓰려면 "use client" 붙이면 됨

Next.js에서는

• 기본 SSG처럼 동작, SSR/ISR/CSR 가능
• 한 페이지 안에 서버 컴포넌트(SSG)와 클라이언트 컴포넌트(CSR)를 섞어 사용
• 또는 페이지별/ 컴포넌트 별로 렌더링 전략 조합 가능
• 리액트는 기본이 CSR로 전부 브라우저에서 렌더링 됨

데이터 패칭 방식 차이

React에서는 보통:

useEffect(() => {
fetch(...)
}, [])

Next에서는 서버에서 바로 가능:

async function getData() {
  const res = await fetch("https://api.example.com/data");
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.name}</div>;
}

⇒ 서버에서 먼저 가져오고 렌더링

⇒ SEO + 초기속도 좋음

참고자료

• https://young-taek.tistory.com/149
• https://kyechan99.github.io/post/lib/why-nextjs
• https://data-newbie.tistory.com/980
• https://ko.react.dev/reference/rsc/server-components
• https://velog.io/@kcj_dev96/%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8server-component%EC%99%80-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8client-component-%EC%B0%A8%EC%9D%B4nextjs-14-version