#14. Client fetch VS Sever Action

1) 호출 모델 차이

Client fetch

• 브라우저에서 JS로 fetch('/api/...')
• 서버에는 HTTP API(Route Handler) 가 있어야 함 (app/api/.../route.ts)
• 결과(JSON)를 받아서 useState로 화면 갱신

흐름
Client(React) → HTTP 요청 → API 응답(JSON) → Client 렌더

 

Server Action

• 브라우저 폼 제출을 Next가 서버 함수로 직접 연결
• 별도 API 엔드포인트가 없어도 됨
• 보통 redirect()로 URL/상태를 유지하거나, useActionState로 결과를 받음

흐름
Client(Form submit) → Server Action 실행 → (redirect / re-render / revalidate) → UI 갱신

 

2) 코드 구조 차이 (무엇이 어디에 있나)

Client fetch 방식에서 필요한 것

• /app/api/.../route.ts (API)
• Client Component에서 useEffect/useState 또는 SWR
• API 입력/출력 스키마(JSON) 설계 필요

Server Action 방식에서 필요한 것

• 'use server' 액션 함수(또는 server-only 데이터 함수)
• Server Component(page)에서 searchParams 기반 렌더
• (선택) redirect, revalidatePath/tag 같은 서버 제어

---

3) 보안/노출 관점

Client fetch

• 호출이 브라우저에서 일어나므로
  • API URL이 노출됨
  • API 요청/응답(JSON)이 노출됨
• 물론 “노출”이 곧 취약점은 아니지만, API를 공개 인터페이스로 운영하는 셈이라
  • 인증/권한검사
  • rate limit
  • 입력 검증
    같은 “API 운영”을 신경 써야 합니다.

Server Action

• DB 접근/로직이 서버에서만 실행되고
• 폼 제출이 서버 함수로 바로 연결되기 때문에
• “API를 외부에 공개”하지 않고도 동작(내부 처리에 유리)

결론: 내부 대시보드/관리자/회원전용 기능은 Server Action이 깔끔한 경우가 많습니다.

 

4) UX/동작 방식 차이

Client fetch 장점

• 입력 타이핑 즉시 검색, 자동완성, debounce 등 즉시 반응형 UI 만들기 쉬움
• 페이지 전체 리렌더 없이 부분 업데이트가 자연스러움

단점

• 로딩/에러/상태 관리 코드가 늘어남
• 무한 fetch 루프 같은 실수(의존성 배열) 가능
• API + Client 2군데를 관리

Server Action 장점

• 폼 제출 → 서버 처리 → 결과 반영이 단순
• redirect('/users?name=...') 같은 패턴이면
  • URL이 상태를 대표(뒤로가기/공유/새로고침 매우 자연스러움)
• “목록 페이지(검색/필터/페이지네이션)” 같은 UI에 특히 잘 맞음

단점

• “타이핑할 때마다 즉시 검색” 같은 UX는 추가 패턴이 필요
  • (대안) 결국 client에서 URL을 바꾸거나(fetch 없이), 부분만 client로 만들거나
• 클라이언트에서 임의로 서버액션을 일반 함수처럼 호출하는 구조는 어렵고(폼/전용 훅 중심), 설계 규칙을 지켜야 함

---

5) 언제 무엇을 쓰면 좋은가 (실무 기준)

Server Action이 좋은 케이스

• 검색/필터/페이지네이션이 URL로 표현되는 목록 화면
• “저장/수정/삭제” 같은 폼 기반 처리(입력 → 서버 반영 → 목록 갱신)
• 내부 기능(외부 공개 API가 굳이 필요 없는 경우)
• DB 로직을 API 형태로 노출하고 싶지 않을 때

Client fetch가 좋은 케이스

• 실시간 자동완성/타이핑 즉시 결과
• 무한스크롤, 폴링, 웹소켓 등 “클라 주도 인터랙션”
• 모바일 앱/외부 서비스 등 다른 클라이언트가 사용할 공용 API가 필요한 경우
• 파일 업로드 진행률 등 브라우저에서 컨트롤이 필요한 경우

---

• 단순 검색 + URL 유지 + 서버 렌더 목록 → Server Action + redirect 방식이 딱 맞음
• “검색어 입력할 때마다 바로 리스트가 바뀌길 원함” → Client fetch/SWR 쪽이 더 자연