Nextjs 서버 액션이란?

서버 액션(Server Actions)은 클라이언트에서 직접 수행할 수 없는 작업(예: 데이터베이스 읽기/쓰기, 보안이 중요한 작업 등)을 서버에서 실행하도록 도와주는 메커니즘입니다. 이를 통해 클라이언트 코드에서 서버에서 실행되는 함수를 호출할 수 있습니다.

 

클라이언트와 서버 간의 연결
클라이언트 측 코드에서 서버 액션을 호출하면 클라이언트는 해당 요청을 서버로 보내고, 서버는 요청을 처리한 뒤 결과를 클라이언트로 반환합니다.

 

주요 사용 사례

• 데이터베이스 CRUD 작업
• 외부 API 호출 (서버에서 보안 인증이 필요한 경우)
• 사용자 인증 및 세션 관리

 

// server-actions.js (서버 코드)
"use server";

export async function addTodoItem(todo) {
  // 데이터베이스에 새 항목 추가
  const result = await db.insert('todos', { content: todo });
  return result;
}

 

// 클라이언트 코드
import { addTodoItem } from './server-actions';

export default function TodoForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const todo = e.target.elements.todo.value;

    // 서버 액션 호출
    const result = await addTodoItem(todo);
    console.log('서버에서 반환된 결과:', result);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="todo" placeholder="할 일 추가" />
      <button type="submit">추가</button>
    </form>
  );
}

 

동작 과정

1. 클라이언트가 서버 액션(addTodoItem)을 호출하면 HTTP 요청이 서버로 전송됩니다.
2. 서버에서 액션이 실행되며 필요한 작업(DB에 항목 추가 등)을 수행합니다.
3. 서버는 처리 결과를 클라이언트로 반환합니다.