Next.js 16에서 서버 컴포넌트만으로 폼 처리, 어디까지 가능할까?
도윤
프론트엔드 · 12분 전 · 조회 2.1k
#개발#Next.js#서버컴포넌트
최근 사이드 프로젝트에서 클라이언트 상태를 거의 쓰지 않고 서버 액션만으로 폼을 구현해봤습니다. 결론부터 말하면, 단순한 CRUD 폼이라면 정말 깔끔하게 떨어집니다. 검증 로직을 한 곳에 둘 수 있다는 점이 가장 큰 장점이었어요.
기본 구조는 이렇습니다. 폼은 평범한 <form> 요소이고, action 속성에 서버 함수를 바로 넘깁니다. 자바스크립트가 로드되기 전에도 폼이 동작한다는 점이 마음에 들었습니다.
async function createPost(formData: FormData) {
"use server";
const title = formData.get("title");
await db.post.create({ data: { title } });
revalidatePath("/posts");
}
// 클라이언트 상태 없이 그대로 넘깁니다
<form action={createPost}>...</form>문제는 인터랙션이 많아질 때입니다. 낙관적 업데이트가 필요하면 useOptimistic을 쓰게 되는데, 이 시점부터는 결국 클라이언트 컴포넌트의 영역으로 넘어옵니다. 그렇다고 모든 걸 클라이언트로 끌고 오면 서버 컴포넌트의 장점이 사라지죠.
“서버 컴포넌트는 만능 도구가 아니라, 경계를 잘 긋기 위한 도구다.” — 이 한 문장이 제 고민을 정리해줬습니다.
그래서 저는 페이지 단위로 기준을 세웠습니다. 즉각적인 피드백이 중요한 화면은 클라이언트로, 나머지는 서버 액션으로. 다른 분들은 이 경계를 어디에 두시나요? 댓글로 패턴을 나눠주시면 정말 도움이 될 겁니다.