[CS 기초] Next.js 14에서 Server Actions과 기존 API Routes의 차이점

 

* Pages Router: 기존 방식. pages/ 폴더 사용.
* App Router: 최신 방식. app/ 폴더 사용. Next.js 13부터 도입 <=내가 자주 쓰는 방식

 

차이점 명확하게 구분하기

항목	Pages Router (pages/)	App Router (app/)
폴더 구조	/pages/about.tsx	/app/about/page.tsx
레이아웃 지원	안 됨 (Layout 따로 관리)	Layout 중첩 가능
서버 컴포넌트	클라이언트 컴포넌트만 가능	Server Component 기본
데이터 패칭 방식	getServerSideProps, getStaticProps	서버 컴포넌트에서 직접 fetch 가능
중첩 라우팅	불편	폴더로 깔끔하게 지원
Server Actions	사용 불가	App Router 전용 기능

 

// Pages Router 예시
// pages/about.tsx
export default function AboutPage() {
  return <div>About 페이지</div>;
}

// App Router 예시
// app/about/page.tsx
export default function AboutPage() {
  return <div>소개 페이지입니다</div>
}

겉보기에 경로만 다름

App Router의 장점 요약

레이아웃 재사용 – layout.tsx를 통해 상위 레이아웃 유지 서버 컴포넌트 기본 – 클라이언트로 JS 적게 전송 서버 액션 지원 – DB 저장 등 서버 코드 바로 실행 가능 중첩 구조 – 페이지 안에 또 다른 하위 페이지도 폴더로 표현 가능

---

 

Server Actions과 기존 API Routes의 차이점

 

차이점 명확하게 구분하기

구분	Server Actions	API Routes
위치	App Router (app/)에서만 가능	Pages Router (pages/api)에서 사용
사용 목적	Form 처리, DB 쓰기 등 간단한 server logic 처리	RESTful API나 복잡한 서버 로직 분리 시 사용
호출 방식	직접 컴포넌트 안에서 호출 (함수처럼)	fetch()로 클라이언트에서 호출
타입 안전성	높음 (TypeScript와 Zod로 타입 보장 쉬움)	낮음 (fetch 쓰면 JSON 파싱 등 직접 관리)
직관성	매우 높음 – 그냥 함수 쓰듯이 server 키워드 붙이면 끝	요청/응답(req/res) 다뤄야 함

 

 

//API Routes 예시

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API Route!' });
}

// 명확한 REST API 스타일
// req, res 직접 다뤄야 하고, 호출도 fetch로 해야 함

 

//Server Actions 예시

'use server'

export async function saveToDB(formData: FormData) {
  // DB 저장 로직
}
// 생략
<form action={saveToDB}>
  <input name="title" />
  <button type="submit">저장</button>
</form>

// 서버 함수처럼 사용 가능
//  컴포넌트 안에서 바로 함수 넘겨주면 서버로 실행됨