Server Action [use server]
폼 제출이나API 호출처럼 특정 이벤트 처리- 함수로 구현되고,
use server를 붙여서 서버에서 실행됨
(클라이언트 컴포넌트에서 호출 가능)
API Route
/app/api/에 정의된 엔드 포인트 (App Router 기준)- 프록시 서버, Webhook, 외부 API 호출 처리 등 범용적으로 사용 가능
Server Component
- 서버에서 렌더링되는 컴포넌트 (서버에서만 실행)
- 클라이언트에는
HTML만 전송 (번들 사이즈 줄고 초기 로딩 속도 ↑) - 인터랙티브는 클라이언트 컴포넌트로 내려줘야됨
🤔 그래서 Server Action과 API Route의 차이점은?
Server Action
1. 버튼 클릭 이벤트 같은 UI 액션을 서버에서 처리
2. FormData 파싱 및 CSRF 방어를 자동으로 처리
3. GET 요청에 직접 대응 불가능 (폼 action 방식이라 기본적으로 POST)API Route
1. GET, POST, PUT, DELETE 등 다양한 HTTP 메서드 지원
2. fetch, axios 같은 클라이언트 코드에서 호출 필요
3. FormData 파싱 및 CSRF 방어 직접 구현여기까지 읽었을 때 평소에 API 연동 시 GET 요청만 아니면 Server Action으로 처리해도 되지 않나? 싶었는데...
- CORS 프록시 서버 역할
- 외부 서비스에서 호출(Webhook, Slack 등)
- 헤더/쿠키 제어
- 실시간 데이터 처리(WebSocket)
- 여러 메서드 분기처리
위에 해당되는 케이스일 때 API Route를 사용하면 된다!
🙆♀️ 한줄정리
Server Component = UI
Server Action = 컴포넌트 안에서 일어나는 액션 처리
API Route = HTTP 메서드와 API를 처리하는 곳
