Next.js의 서버 액션(Server Actions)

서버 액션(Server Actions)은 Next.js 14에서 도입된 기능으로, 클라이언트에서 직접 API 라우트를 호출하지 않고, 서버에서 실행되는 비동기 함수를 클라이언트에서 호출할 수 있도록 하는 새로운 방식이다.

기존의 API Routes나 useEffect에서 fetch를 사용해 서버와 데이터를 주고받던 방식과 달리, 서버 액션을 사용하면 API 엔드포인트를 별도로 만들지 않고도 서버에서 직접 데이터를 처리할 수 있다.

 

✅ 서버 액션의 특징

1. 서버에서 실행되는 함수
   • 클라이언트에서 실행을 요청하지만, 함수 자체는 서버에서 실행됨.
   • 클라이언트에서는 서버 액션을 호출하는 역할만 수행.
2. API 라우트 없이 데이터 전송 가능
   • 기존에는 pages/api 혹은 app/api를 사용해 API를 만들어야 했지만, 서버 액션을 사용하면 그럴 필요 없음.
3. 서버 컴포넌트(Server Component) & 클라이언트 컴포넌트(Client Component)에서 모두 사용 가능
   • 하지만 클라이언트에서 사용하려면 "use server" 디렉티브를 추가해야 함.
4. React의 useFormState, useFormStatus와 함께 사용하면 강력한 폼 처리 가능
   • 서버 액션을 활용하면 폼을 간결하게 관리 가능.

 

📌 서버 액션 사용법

1️⃣ 서버 액션 함수 만들기

"use server";

export async function addTodo(todo: string) {
  // 예제: DB에 추가하는 로직 (여기서는 console.log로 대체)
  console.log("새로운 할 일 추가:", todo);

  return { message: "할 일이 추가되었습니다!" };
}

"use server"를 맨 위에 추가하면 해당 함수가 서버에서 실행됨.

 

2️⃣ 서버 액션을 클라이언트에서 호출

(1) 버튼에서 직접 호출

"use client";

import { addTodo } from "./actions";

export default function TodoApp() {
  async function handleAdd() {
    const response = await addTodo("Next.js 공부하기");
    alert(response.message);
  }

  return <button onClick={handleAdd}>할 일 추가</button>;
}

API 엔드포인트를 직접 호출하지 않고, addTodo()를 실행하면 자동으로 서버에서 실행됨.

 

(2) <form>에서 사용 (useFormState 활용)

"use client";

import { useFormState } from "react-dom";
import { addTodo } from "./actions";

export default function TodoForm() {
  const [state, formAction] = useFormState(addTodo, null);

  return (
    <form action={formAction}>
      <input name="todo" placeholder="할 일을 입력하세요" />
      <button type="submit">추가</button>
      {state && <p>{state.message}</p>}
    </form>
  );
}

• <form>의 action 속성에 서버 액션을 직접 넘겨줄 수 있음.
• useFormState를 사용하면 상태(state) 관리를 쉽게 할 수 있음.

 

🚀 서버 액션의 장점

✅ API 엔드포인트 없이 서버 기능 사용 가능

✅ 코드가 간결해지고 유지보수가 쉬워짐

✅ 서버에서 직접 실행되므로 보안이 강화됨

✅ 서버 액션 + React의 새로운 폼 관련 훅(useFormState, useFormStatus)을 함께 사용하면 강력한 폼 처리가 가능