Server Actions (서버 액션)
👉 Next.js 13+에서 추가된 핵심 기능으로,
👉 클라이언트 → 서버 데이터 변경(Mutation)을 단순하게 처리할 수 있다.
기존에는 데이터 변경을 위해 API Route를 따로 만들어야 했지만,
Server Actions를 사용하면 컴포넌트에서 직접 서버 로직을 실행할 수 있다.
개념
Server Action은 서버에서 실행되는 함수로,
주로 데이터 생성 / 수정 / 삭제 (Mutation) 작업을 담당한다.
정리하면 다음과 같이 역할이 나뉜다.
- 데이터 조회 → Server Component / fetch
- 데이터 변경 → Server Action
👉 즉, Server Action은 Next.js에서 Mutation을 담당하는 표준 방식이라고 볼 수 있다.
왜 중요한가?
기존 방식:
- 클라이언트에서 API 호출
- API Route에서 로직 처리
- 응답을 받아 상태 업데이트
Server Actions:
👉 API 없이 서버 함수 직접 실행
이 구조 덕분에
- API Route를 따로 만들지 않아도 되어 코드가 줄어들고
- 클라이언트 → 서버 → 클라이언트로 이어지던 흐름이 단순해지며
- 데이터 변경 로직을 한 곳에서 관리할 수 있다
👉 결과적으로, 구현해야 할 구조 자체가 단순해진다.
기본 사용법
1. 서버 액션 정의
'use server';
export async function createPost(formData: FormData) {
const title = formData.get('title');
await db.post.create({
data: { title },
});
}2. form에서 바로 사용
import { createPost } from './actions';
export default function Page() {
return (
<form action={createPost}>
<input name="title" />
<button type="submit">Submit</button>
</form>
);
}핵심 포인트
- form의
action에 함수 직접 연결 - 별도의 API endpoint 불필요
- 자동으로 서버에서 실행됨
👉 기존 fetch + API 구조보다 훨씬 직관적이다.
클라이언트 컴포넌트에서 사용
Client Component에서도 Server Action을 사용할 수 있다.
'use client';
import { createPost } from './actions';
export default function Button() {
return (
<button onClick={() => createPost()}>
생성하기
</button>
);
}주의할 점
- 브라우저 이벤트 → 서버 함수 호출 구조이기 때문에
- 네트워크 요청이 발생한다는 점을 고려해야 한다
👉 단순 함수 호출처럼 보여도 실제로는 서버 통신이다.
revalidate로 데이터 갱신
Mutation 이후에는 기존 데이터가 stale 상태가 되기 때문에
캐시를 갱신해야 한다.
'use server';
import { revalidatePath } from 'next/cache';
export async function createPost(formData: FormData) {
await db.post.create({
data: { title: formData.get('title') },
});
revalidatePath('/posts');
}핵심 포인트
- Server Action + revalidate 조합이 중요
- 데이터 변경 후 UI 최신 상태 유지
👉 이걸 놓치면 "데이터는 바뀌었는데 화면은 안 바뀌는" 문제가 생긴다.
기존 방식 vs Server Actions
| 구분 | 기존 방식 | Server Actions |
|---|---|---|
| 데이터 변경 | API Route 필요 | 필요 없음 |
| 코드 구조 | 클라이언트 + API 분리 | 한 곳에서 처리 |
| 복잡도 | 상대적으로 높음 | 단순함 |
언제 사용하면 좋은가?
- form 기반 데이터 제출
- CRUD 작업
- 간단한 서버 로직 처리
- 빠르게 기능을 구현해야 하는 경우
한계 및 고려할 점
-
복잡한 비즈니스 로직은 여전히 분리하는 것이 좋다
-
서버 로직이 컴포넌트와 가까워지면서 구조가 섞일 수 있다
→ 규모가 커지면 레이어 분리가 필요하다 -
내부적으로는 네트워크 요청이 발생한다
👉 즉, Server Action은 편리하지만 모든 상황에서 사용하는 것이 아니라
단순한 Mutation이나 빠른 구현이 필요한 경우에 더 적합하다.
정리
- Server Action은 데이터 변경(Mutation)을 담당
- API Route 없이 서버 로직 실행 가능
- form과 자연스럽게 결합됨
- revalidate를 통해 데이터 최신화 필요
한 줄 정리
Server Action은 Next.js에서 데이터 변경(Mutation) 흐름을 단순화해주는 기능이며,
API 없이도 서버 로직을 직접 처리할 수 있게 해준다.
