Server Actions

Server Actions
서버 액션
"use server" 함수로, 컴포넌트에서 직접 호출되는 서버측 뮤테이션/로직. 폼/버튼에서 직접 서버로 호출하고, 호출 후 경로/태그 재검증(revalidate)까지 한 번에.
Next.js 13.4 버전에서 도입된 기능으로, 클라이언트에서 서버 코드를 직접 호출하여 실행할 수 있게 해주는 기능이다.
이를 통해 API 라우트를 따로 만들지 않고도 데이터베이스 작업, 파일 업로드 등과 같은 서버 측 로직을 직접 처리할 수 있다.
Server Actions는 React의 'use server' 지시문을 기반으로 한다.

예시

예시 1

Server Actions를 사용하면 form 태그의 action 속성을 활용해 폼 데이터를 쉽게 처리할 수 있다.
이 코드는 별도의 API 라우트 없이도 form 제출 시 createPost 함수가 서버에서 안전하게 실행되도록 한다.

// app/page.tsx
import { db } from '@/lib/db';

// 서버 컴포넌트
export default function Page() {
  async function createPost(formData: FormData) {
    'use server'; // <--- 서버 액션 지시문

    const title = formData.get('title');
    const content = formData.get('content');
    
    // DB에 데이터 저장
    await db.post.create({
      data: { title, content },
    });
  }

  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <textarea name="content"></textarea>
      <button type="submit">게시</button>
    </form>
  );
}