Next.js 서버 액션(Server Actions) 완벽 이해하기: 개념부터 실전 예제까지

Next.js 13.4 버전부터 안정화된 서버 액션(Server Actions)은 modern 웹 개발의 패러다임을 바꾸고 있습니다. API 엔드포인트를 일일이 생성하지 않고도 서버 측 로직을 실행할 수 있는 서버 액션의 핵심 개념과 사용법을 정리해 드립니다.

1. 서버 액션(Server Actions)이란?

서버 액션은 클라이언트 컴포넌트나 서버 컴포넌트에서 호출할 수 있는 비동기 함수입니다.

기존에는 클라이언트에서 데이터를 수정하려면 fetch를 통해 특정 API 라우트(/api/post)에 요청을 보내고, 서버에서 이를 처리하는 과정을 거쳐야 했습니다. 하지만 서버 액션을 사용하면 별도의 API 라우트 없이 함수 하나로 서버 DB 작업 등을 직접 수행할 수 있습니다.

---

2. 왜 서버 액션을 사용해야 할까?

• 코드 간결화: API 엔드포인트를 정의하고 관리하는 번거로움이 사라집니다.
• 강력한 타입 안전성: TypeScript를 사용할 경우 서버와 클라이언트 간의 매개변수 및 응답 타입을 공유할 수 있습니다.
• Progressive Enhancement: 자바스크립트가 로드되지 않은 환경에서도 <form> 태그와 함께 사용하면 기본적인 데이터 전송이 가능합니다.
• 효율적인 캐시 갱신: revalidatePath나 revalidateTag를 사용하여 데이터 변경 후 화면을 즉시 최신화할 수 있습니다.

---

3. 서버 액션 구현하기

서버 액션을 정의할 때는 반드시 파일 최상단이나 함수 내부 시작 지점에 'use server' 지시어를 작성해야 합니다.

3.1 서버 액션 정의 (actions.ts)

서버에서 실행될 비동기 함수를 정의합니다.

// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // 데이터베이스 저장 로직 (예시)
  // await db.post.create({ data: { title, content } })

  // 데이터 변경 후 특정 경로의 캐시를 갱신
  revalidatePath('/posts')
}

3.2 컴포넌트에서 사용하기

<form>의 action 속성에 정의한 서버 액션을 연결합니다.

// app/posts/page.tsx
import { createPost } from '@/app/actions'

export default function Page() {
  return (
    <form action={createPost}>
      <input type="text" name="title" placeholder="제목을 입력하세요" required />
      <textarea name="content" placeholder="내용을 입력하세요" required />
      <button type="submit">작성하기</button>
    </form>
  )
}

---

4. 실전 활용 팁

useFormStatus 활용

데이터가 전송 중일 때 버튼을 비활성화하거나 로딩 상태를 표시하려면 useFormStatus 훅을 사용합니다. (자식 컴포넌트로 분리하여 사용해야 합니다.)

'use client'
import { useFormStatus } from 'react-dom'

export function SubmitButton() {
  const { pending } = useFormStatus()
  return (
    <button type="submit" disabled={pending}>
      {pending ? '저장 중...' : '저장하기'}
    </button>
  )
}

---

5. 공식 문서 및 참고 자료

더 상세한 보안 규칙이나 고급 활용법은 Next.js 공식 문서를 참고하세요.

https://nextjs.org/docs/13/app/building-your-application/data-fetching/server-actions-and-mutations

Data Fetching: Server Actions and Mutations | Next.js

서버 액션은 프론트엔드와 백엔드의 경계를 허물고 개발 생산성을 극대화하는 강력한 도구입니다.

지금 바로 프로젝트에 적용하여 더 단순하고 견고한 코드를 작성해 보세요!

---

참고할만한 글

https://nextjs-ko.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

Server Actions and Mutations – Nextjs 한글 문서

https://velog.io/@olzlel2000/Next.js-%EC%84%9C%EB%B2%84-%EC%95%A1%EC%85%98-%EA%B8%B0%EB%8A%A5

Next.js - 서버 액션 기능

https://velog.io/@shinhw371/Next.js-Server-Action

[Next.js] Server Action 사용하기