Server Actions는 어떤 문제를 해결하나요?

Server Actions는 폼 제출이나 클라이언트 이벤트에서 서버 함수를 직접 호출할 수 있게 해, 별도의 API route 작성 부담을 줄이고 mutation 로직을 서버 가까이에 둘 수 있게 합니다.

기본 예시

// app/actions.ts
'use server';

export async function createTodo(formData: FormData) {
  const title = String(formData.get('title'));
  await db.todo.create({ data: { title } });
}

<form action={createTodo}>
  <input name="title" />
  <button type="submit">추가</button>
</form>

해결하는 문제

• 간단한 mutation마다 API route, fetch, body parsing 코드를 반복하지 않아도 됩니다.
• 서버 전용 코드와 secret을 클라이언트 번들에 넣지 않습니다.
• form과 progressive enhancement를 자연스럽게 지원합니다.
• mutation 후 revalidatePath, redirect 같은 Next.js 기능과 연결하기 쉽습니다.

주의점

Server Action도 외부에서 호출 가능한 서버 엔드포인트처럼 취급해야 합니다. 인증/인가, 입력 검증, CSRF 모델, rate limit을 반드시 고려해야 합니다.

'use server';
export async function deletePost(id: string) {
  const user = await requireUser();
  await assertCanDelete(user, id);
  await db.post.delete({ where: { id } });
}

면접 답변 포인트

Server Actions는 서버 mutation을 컴포넌트와 가까운 위치에서 선언하고 호출하게 해 API 보일러플레이트를 줄입니다. 하지만 보안 검증이 자동으로 해결되는 것은 아니므로 서버 엔드포인트처럼 다뤄야 합니다.