# Next.js 16 Server Actions 2026: 뮤테이션, 무효화 그리고 면접 질문

> Next.js 16 Server Action이 뮤테이션, 무효화, 대기 상태, 낙관적 UI, 보안을 어떻게 처리하는지, 그리고 각 개념을 검증하는 면접 질문까지 살펴봅니다.

- Published: 2026-06-24
- Updated: 2026-07-06
- Author: SharpSkill
- Tags: next.js, server-actions, react, mutations, revalidation, interview
- Reading time: 11 min

---

Next.js Server Action은 평범한 async 함수를 폼이 직접 호출할 수 있는 서버 측 뮤테이션 엔드포인트로 바꿔 줍니다. API 라우트도, 클라이언트 `fetch`도, 수동 JSON 직렬화도 필요하지 않습니다. Next.js 16에서 Server Action은 데이터 뮤테이션을 작성하는 기본 방식이며, 2026년 시니어 React 면접에서는 거의 빠짐없이 등장합니다. 이 심층 분석에서는 Server Action이 어떻게 실행되는지, 무효화가 어떻게 최신 데이터를 UI로 전파하는지, 대기 및 오류 상태를 어떻게 모델링하는지, 그리고 대부분의 개발자가 걸려 넘어지는 보안 규칙까지 짚어 봅니다.

> **한 문장 정의**
>
> Server Action은 `"use server"`로 표시된 async 함수로, 서버에서만 실행되며 클라이언트 컴포넌트나 폼에서 마치 로컬 함수처럼 호출할 수 있습니다. 그 사이 Next.js가 네트워크 요청, 인자 직렬화, CSRF 보호를 자동으로 처리합니다.

## Server Action이 내부적으로 실행되는 방식

Server Action은 컴파일러가 생성한 엔드포인트를 통해 네트워크로 호출되는 서버 전용 함수입니다. 함수에 `"use server"` 지시어가 붙으면 Next.js 컴파일러는 그 본문을 절대 브라우저로 보내지 않습니다. 대신 함수를 가벼운 참조로 대체합니다. 해시된 액션 ID가 생성된 POST 라우트에 매핑되는 방식입니다. 클라이언트에서 액션을 호출하면 해당 라우트로 요청이 전송되고, 실제 함수는 서버에서 실행되며, 직렬화된 결과가 호출자에게 다시 스트리밍됩니다.

이 설계에는 프로덕션 코드와 면접 양쪽에서 기억해 둘 만한 세 가지 결과가 따릅니다. 첫째, 인자와 반환값은 인코딩된 페이로드로 네트워크를 건너가므로 반드시 직렬화 가능해야 합니다. 둘째, 함수 본문은 클라이언트용으로 번들되지 않으므로 비밀 값은 서버에 남습니다. 셋째, `<form>`에 연결된 액션은 하이드레이션 이전에도 동작하며, 이것이 점진적 향상(progressive enhancement)이 핵심 강점으로 꼽히는 이유입니다. [데이터 업데이트에 관한 Next.js 가이드](https://nextjs.org/docs/app/getting-started/updating-data)는 전체 실행 모델을 문서로 정리하고 있습니다.

모든 Server Action은 `"use server"`로 표시된 파일이나 블록 안에 존재합니다. 단일 뮤테이션은 다음과 같은 모습입니다.

```typescript
// app/posts/actions.ts
"use server"

import { revalidatePath } from "next/cache"
import { redirect } from "next/navigation"
import { PostService } from "@/lib/services/post-service"

export async function createPost(formData: FormData) {
  // FormData values arrive as strings; cast explicitly
  const title = formData.get("title") as string
  const body = formData.get("body") as string

  // Run business logic through the service layer, never the ORM directly
  const post = await PostService.create({ title, body })

  // Purge the cached list so the next request refetches it
  revalidatePath("/posts")

  // Send the user to the freshly created resource
  redirect(`/posts/${post.id}`)
}
```

이 함수는 제출된 `FormData`를 읽고, 서비스 계층을 통해 저장하며, 캐시된 목록을 무효화하고, 리다이렉트합니다. 그 어느 단계에서도 클라이언트 JavaScript는 필요하지 않습니다.

## 클라이언트 JavaScript 없이 Server Action을 폼에 연결하기

액션을 폼의 `action` prop에 전달하는 것이 가장 단순한 연결 방식입니다. Next.js는 제출 내용을 `FormData`로 직렬화하여 서버에서 함수를 호출합니다. 이 방식은 네이티브 폼 제출 메커니즘을 사용하므로 JavaScript가 비활성화된 상태에서도 동작하고, 페이지가 하이드레이션되면 자연스럽게 향상됩니다.

```tsx
// app/posts/new-post-form.tsx
import { createPost } from "./actions"

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="body" required />
      <button type="submit">Publish</button>
    </form>
  )
}
```

각 필드의 `name` 속성은 `formData.get()`이 읽는 키가 됩니다. [MDN FormData 레퍼런스](https://developer.mozilla.org/en-US/docs/Web/API/FormData)는 브라우저가 폼으로부터 이 객체를 어떻게 구성하는지 설명합니다. 더 세밀한 제어가 필요하다면 `next/form`이 동일한 액션 기반 계약을 유지하면서 클라이언트 측 내비게이션과 프리페칭으로 네이티브 요소를 확장합니다.

## useActionState로 대기 및 오류 상태 관리하기

실제 폼에는 검증 피드백과 로딩 표시가 필요합니다. React 19의 `useActionState` 훅은 Server Action을 감싸고, 제출마다 상태 값을 이어 주며, `isPending` 플래그를 노출합니다. 이 훅은 이전의 `useFormState`라는 이름을 대체하며, 현재 상태와 감싸진 액션, 그리고 대기 여부 불리언으로 이루어진 튜플을 반환합니다.

```tsx
// app/posts/new-post-form.tsx
"use client"

import { useActionState } from "react"
import { createPost } from "./actions"

const initialState = { error: "" }

export default function NewPostForm() {
  // state carries the last return value; isPending tracks the in-flight request
  const [state, formAction, isPending] = useActionState(createPost, initialState)

  return (
    <form action={formAction}>
      <input name="title" required />
      <textarea name="body" required />
      {state.error ? <p role="alert">{state.error}</p> : null}
      <button type="submit" disabled={isPending}>
        {isPending ? "Publishing..." : "Publish"}
      </button>
    </form>
  )
}
```

훅이 액션을 구동하면 함수 시그니처는 `FormData` 앞에 `prevState`라는 첫 번째 매개변수를 얻습니다. 예외를 던지는 대신 객체를 반환하면, 컴포넌트는 오류 경계(error boundary) 없이도 인라인 검증을 렌더링할 수 있습니다.

```typescript
// app/posts/actions.ts
"use server"

import { revalidateTag } from "next/cache"
import { PostService } from "@/lib/services/post-service"

type FormState = { error: string }

export async function createPost(
  prevState: FormState,
  formData: FormData,
): Promise<FormState> {
  const title = formData.get("title") as string

  // Validate on the server; client validation is never trustworthy alone
  if (!title || title.length < 3) {
    return { error: "Title must be at least 3 characters." }
  }

  await PostService.create({ title })

  // Invalidate by tag rather than path for finer-grained control
  revalidateTag("posts")
  return { error: "" }
}
```

[react.dev의 useActionState 레퍼런스](https://react.dev/reference/react/useActionState)는 하이드레이션 이전 제출을 위한 퍼머링크 지원과 같은 고급 패턴을 다룹니다. 구조화된 상태를 반환하면 정상 경로와 오류 경로를 예측 가능한 한 곳에 모아 둘 수 있습니다.

## revalidatePath vs revalidateTag: 올바른 무효화 선택하기

뮤테이션은 작업의 절반에 불과합니다. UI가 그 결과를 반영해야 합니다. Next.js는 `next/cache`에서 두 가지 무효화 함수를 제공하며, 올바른 쪽을 고르는 것은 면접에서 자주 등장하는 변별 요소입니다.

| 함수 | 무효화 대상 | 적합한 경우 |
|----------|-------------|-----------|
| `revalidatePath("/posts")` | 해당 라우트의 모든 캐시 항목 | 뮤테이션이 하나의 명확한 페이지나 레이아웃에 영향을 줄 때 |
| `revalidateTag("posts")` | 해당 태그가 붙은 모든 캐시된 fetch | 동일한 데이터가 여러 라우트에 걸쳐 나타날 때 |

`revalidatePath`는 거칠고 라우트 중심적입니다. 특정 URL과 그 레이아웃 트리의 캐시를 지웁니다. `revalidateTag`는 세밀하고 데이터 중심적입니다. 해당 문자열로 태그된 모든 `fetch`나 캐시된 함수는 어디에 있든 무효화됩니다. 태그는 대규모 앱에서 더 잘 확장됩니다. 하나의 뮤테이션이 사이드바, 목록, 상세 페이지를 단 한 번의 호출로 새로고침할 수 있기 때문입니다. 두 함수 모두 즉시 다시 가져오지 않고 데이터를 만료된 상태로 표시하므로, 다음 요청에서 콘텐츠가 재생성됩니다.

Next.js 16의 Cache Components에서 태깅은 `cacheTag`를 통해 `"use cache"` 지시어와 통합되며, 이는 앱 전반에서 캐싱을 사고하는 방식을 바꿉니다. 이 상호작용은 SharpSkill의 [Next.js 16 Cache Components 가이드](/blog/react-next/nextjs-16-cache-components-use-cache-ppr-interview-questions)에서 깊이 있게 다룹니다.

## useOptimistic으로 낙관적 UI 업데이트하기

네트워크 왕복은 체감되는 지연을 더합니다. `useOptimistic` 훅은 예상 결과를 즉시 렌더링한 뒤, 액션이 완료되면 서버 응답과 조정(reconcile)합니다. 이 훅은 현재 상태와, 낙관적 버전을 만들어 내는 리듀서를 받습니다.

```tsx
// app/posts/like-button.tsx
"use client"

import { useOptimistic } from "react"
import { likePost } from "./actions"

export function LikeButton({ postId, likes }: { postId: string; likes: number }) {
  // optimisticLikes updates before the server confirms
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (current) => current + 1,
  )

  async function handleLike() {
    addOptimisticLike(null) // update the UI immediately
    await likePost(postId)  // then run the real mutation
  }

  return (
    <form action={handleLike}>
      <button type="submit">Like ({optimisticLikes})</button>
    </form>
  )
}
```

액션이 실패하면 React는 낙관적 값을 확정된 서버 상태로 자동 되돌리므로 수동 롤백이 필요하지 않습니다. [react.dev의 useOptimistic 레퍼런스](https://react.dev/reference/react/useOptimistic)는 조정 주기가 트랜지션과 어떻게 상호작용하는지 상세히 설명합니다. 이 패턴 덕분에 Server Action 폼은 완전한 클라이언트 렌더링 SPA만큼 반응성 있게 느껴집니다.

## 이벤트 핸들러에서 인자 바인딩 및 Action 호출하기

모든 뮤테이션이 폼 제출에서 시작되는 것은 아닙니다. 행 삭제, 설정 토글, 목록 재정렬은 흔히 버튼 클릭이나 다른 이벤트에서 발생합니다. Server Action은 클라이언트에서 평범한 함수 참조이므로, 호출이 UI 반응성을 유지하기 위해 트랜지션 안에서 실행되기만 한다면 어떤 핸들러에서든 호출할 수 있습니다.

폼 필드가 아닌 추가 인자는 `bind`로 붙입니다. `bind`는 그 값들이 앞에 붙은 새로운 액션을 만들어 냅니다. 이것이 제출된 `FormData`와 함께 ID를 전달하는 관용적인 방식입니다.

```tsx
// app/posts/post-actions.tsx
"use client"

import { useTransition } from "react"
import { deletePost, updatePost } from "./actions"

export function PostActions({ postId }: { postId: string }) {
  const [isPending, startTransition] = useTransition()

  // Bind the id so the action receives it before FormData
  const updateWithId = updatePost.bind(null, postId)

  return (
    <div>
      <form action={updateWithId}>
        <input name="title" />
        <button type="submit">Save</button>
      </form>

      {/* Event-handler invocation wrapped in a transition */}
      <button
        onClick={() => startTransition(() => deletePost(postId))}
        disabled={isPending}
      >
        {isPending ? "Deleting..." : "Delete"}
      </button>
    </div>
  )
}
```

바인딩된 인자는 다른 클로저 값과 마찬가지로 암호화되므로 `postId`가 전송 중에 변조되지 않습니다. 다만 그래도 액션은 호출자가 해당 레코드에 대해 작업할 권한이 있는지 반드시 확인해야 합니다. 직접 호출을 `startTransition`으로 감싸면 React가 인터페이스를 상호작용 가능한 상태로 유지하면서 폼 래퍼 없이도 대기 상태를 표면화합니다.

## Server Action 보안: 모든 Action을 공개 API로 취급하기

가장 위험한 오해는 Server Action이 서버 코드 옆에 작성되었기 때문에 비공개라고 여기는 것입니다. 실제로는 액션이 사용되는 순간, Next.js는 누구나 조작된 요청으로 호출할 수 있는 공개 POST 엔드포인트를 생성합니다. 프레임워크는 안전한 액션 ID를 제공하고 `next build` 과정에서 사용되지 않는 액션을 제거하지만, 호출자를 인가하지는 않습니다.

> **모든 Action 내부에서 인가하십시오**
>
> Server Action은 도달 가능한 HTTP 엔드포인트입니다. 레이아웃이나 미들웨어의 세션 검사는 이를 보호하지 못합니다. 공격자가 액션에 직접 POST를 보낼 수 있기 때문입니다. 어떤 데이터에도 손대기 전에 액션 본문 안에서 세션과 호출자의 권한을 검증하십시오.

```typescript
// app/admin/actions.ts
"use server"

import { auth } from "@/lib/auth"
import { headers } from "next/headers"
import { UserService } from "@/lib/services/user-service"

export async function deleteUser(userId: string) {
  // Authenticate on every invocation, not in a wrapper component
  const session = await auth.api.getSession({ headers: await headers() })
  if (!session || session.user.role !== "admin") {
    throw new Error("Unauthorized")
  }

  await UserService.delete(userId)
}
```

두 가지 규칙이 더 있습니다. 인라인 액션이 캡처한 클로저 값은 클라이언트로 전송되기 전에 암호화되고 서버에서 복호화되므로, 캡처된 토큰이 평문으로 유출되지는 않습니다. 그러나 이에 의존하는 것은 취약합니다. 비밀 값은 클로저에서 완전히 배제하십시오. 그리고 클라이언트에서 오는 모든 인자는 REST 본문과 똑같이 검증해야 하는 신뢰할 수 없는 입력입니다. [Next.js 데이터 보안 가이드](https://nextjs.org/docs/app/guides/data-security)는 이러한 보장의 바탕이 되는 오염(taint) 모델을 공식화하고 있습니다. 이 트레이드오프를 구조적으로 연습하려면, SharpSkill의 [Next.js Server Actions 면접 모듈](/technologies/react-next/interview-questions/nextjs-server-actions)이 채용 패널이 던지는 바로 그 질문들을 훈련시켜 줍니다.

## Next.js 16 Server Action 면접 질문

다음 질문들은 2026년 시니어 React 및 풀스택 면접 과정에서 반복적으로 등장합니다.

**Server Action은 왜 직렬화 가능한 값만 받고 반환할 수 있습니까?** 인자와 결과가 클라이언트와 서버 사이의 네트워크 경계를 인코딩된 페이로드로 건너가기 때문입니다. 함수, 클래스 인스턴스, DOM 노드는 직렬화할 수 없으므로 전달하면 예외가 발생합니다. `FormData`, 평범한 객체, 배열, 원시값은 안전합니다.

**Server Action에서 점진적 향상은 어떻게 작동합니까?** 액션이 폼의 `action` prop에 직접 전달되면, 브라우저는 React가 하이드레이션되기 전에도 POST 요청으로 폼을 네이티브하게 제출합니다. Next.js가 이를 가로채 서버 측에서 액션을 실행하므로, 폼은 클라이언트 JavaScript 없이도 동작하고 하이드레이션 이후 클라이언트 주도 경험으로 향상됩니다.

**액션에서 예외를 던지는 것과 오류를 반환하는 것의 차이는 무엇입니까?** 예외를 던지면 가장 가까운 오류 경계로 전파되며, 예상치 못한 실패에 적합합니다. `useActionState`를 통해 구조화된 상태 객체를 반환하는 것은 폼을 언마운트하지 않고 인라인으로 렌더링되어야 하는 예상된 검증 오류에 적합합니다.

**revalidatePath를 호출하면 데이터가 즉시 다시 가져와집니까?** 아닙니다. 캐시 항목을 만료된 것으로 표시하여 다음 요청에서 재생성되도록 합니다. 현재 응답은 영향을 받지 않으며, 이것이 뮤테이션 이후의 리다이렉트가 새로 렌더링된 콘텐츠에 도착하는 이유입니다.

이 뮤테이션이 실행되는 더 넓은 렌더링 맥락에 대해서는, [프로덕션의 React 19 Server Components](/blog/react-next/react-19-server-components-production) 분석이 Server Action 지식과 자연스럽게 어울립니다.

## 결론

Next.js 16 Server Action은 뮤테이션, 무효화, 점진적 향상을 서버 우선의 단일 프리미티브로 통합합니다. 핵심 요점은 다음과 같습니다.

- 뮤테이션을 `"use server"`로 표시하고 폼의 `action` prop에 전달하면 네트워크 처리와 점진적 향상을 공짜로 얻습니다.
- 대기 및 검증 상태는 `useActionState`로 구동하고, 예상된 오류에는 예외를 던지는 대신 구조화된 객체를 반환하십시오.
- 하나의 라우트가 바뀔 때는 `revalidatePath`를, 동일한 데이터가 여러 라우트에 걸칠 때는 `revalidateTag`를 사용하십시오.
- `useOptimistic`으로 예상 결과를 즉시 렌더링하고 React가 자동으로 조정하거나 롤백하도록 두십시오.
- 사용되는 모든 액션은 미들웨어만으로는 보호되지 않는 공개 HTTP 엔드포인트이므로, 모든 액션 본문 안에서 인가하고 검증하십시오.

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/blog/react-next/nextjs-16-server-actions-mutations-revalidation-interview-questions