⚡ Next.js 15과 그 너머: 풀스택 React를 위한 Server Actions 마스터하기

Next.js는 항상 React 개발의 최첨단에 있어왔습니다. **SSR (서버 사이드 렌더링)**부터 App Router와 **React Server Components (RSC)**까지, 현대 웹 앱을 구축하는 방식을 지속적으로 재정의해왔습니다.

**Next.js 15 (2025)**에서 가장 큰 발전 중 하나는 Server Actions — 전통적인 API를 작성하지 않고도 컴포넌트에서 직접 서버 사이드 함수를 호출할 수 있게 해주는 게임 체인저 기능입니다.

🔹 1. Server Actions란 무엇인가요?

전통적으로 Next.js에서 다음과 같은 작업을 원한다면:

폼 제출
데이터베이스에 데이터 삽입
백엔드 작업 수행

API 경로(/api/...)를 생성하고 프론트엔드에서 이를 호출해야 했습니다.

Server Actions를 사용하면 이제 다음이 가능합니다:

React 컴포넌트 파일 내부에 서버 함수 작성
클라이언트 UI에서 직접 호출
보일러플레이트 API 건너뛰기

👉 일반 함수를 호출하는 것처럼 느껴지지만, 서버에서 안전하게 실행됩니다.

🔹 2. Server Actions가 중요한 이유

Server Actions 이전:

너무 많은 API 보일러플레이트 (GET, POST 핸들러)
추가적인 클라이언트 사이드 fetch 로직
복잡한 직렬화/역직렬화

Server Actions와 함께:

컴포넌트에서 직접 데이터베이스 변경
API 레이어 복잡성 감소
더 빠른 DX (개발자 경험)
더 안전함 (함수가 클라이언트에 노출되지 않음)

이는 풀스택 혁명입니다 — React 컴포넌트가 이제 "백엔드 인식"을 할 수 있습니다.

🔹 3. Server Actions 설정

Next.js 15에서 Server Actions를 활성화하려면:

// next.config.js
module.exports = {
  experimental: {
    serverActions: true,
  },
};

이제 컴포넌트에서 사용할 수 있습니다.

🔹 4. 예제: API 경로 없이 폼 제출하기

실제로 어떻게 보이는지 확인해보세요:

"use client";
import { useState } from "react";
import { createNote } from "./actions";

export default function NoteForm() {
  const [note, setNote] = useState("");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    await createNote(note); // ✅ 서버 액션 직접 호출
    setNote("");
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input
        value={note}
        onChange={(e) => setNote(e.target.value)}
        className="border p-2 rounded"
        placeholder="노트 작성..."
      />
      <button className="bg-blue-600 text-white px-4 py-2 rounded">
        노트 추가
      </button>
    </form>
  );
}

이제 서버 액션:

"use server";
import { db } from "@/lib/db";

export async function createNote(text: string) {
  await db.note.create({
    data: { text },
  });
}

🚀 그게 다입니다! api/notes.ts, fetch, 보일러플레이트가 필요 없습니다.

🔹 5. Server Actions가 내부적으로 작동하는 방식

함수를 "use server"로 표시하면, Next.js가:
함수 참조를 직렬화
서버에 저장
클라이언트가 안전한 POST 요청을 통해 호출
함수는 클라이언트로 전송되지 않음 — 참조만 사용됩니다

React 자체에 내장된 **RPC (원격 프로시저 호출)**로 생각하세요.

🔹 6. 실제 사용 사례

✅ 데이터베이스 변경 (레코드 생성, 업데이트, 삭제)

✅ 인증 (API 없이 로그인/로그아웃)

✅ 파일 업로드 (서버 또는 클라우드 스토리지로 직접)

✅ 트랜잭션 워크플로 (결제, 지불)

✅ AI 통합 (서버 액션에서 OpenAI API 안전하게 호출)

🔹 7. Server Actions + React Suspense

Server Actions는 React Suspense와 아름답게 통합되어 즉시 UI 피드백을 제공합니다:

"use client";
import { addTodo } from "./actions";
import { experimental_useOptimistic as useOptimistic } from "react";

export default function TodoApp() {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic([],
    (state, newTodo) => [...state, newTodo]);

  async function handleAdd(todo: string) {
    addOptimisticTodo({ text: todo });
    await addTodo(todo); // 서버 액션
  }

  return (
    <div>
      {optimisticTodos.map((t, i) => <p key={i}>{t.text}</p>)}
      <button onClick={() => handleAdd("새 작업")}>작업 추가</button>
    </div>
  );
}

여기서 UI는 즉시 업데이트되고(낙관적 UI), 실제 서버 호출은 백그라운드에서 발생합니다.

🔹 8. 보안 고려사항

Server Actions는 강력하지만 여전히 다음을 해야 합니다:

모든 입력 검증 (SQL 인젝션 위험)
인증으로 민감한 작업 보호 (next-auth, clerk 등)
서버 액션 내부에서 무거운 로직 피하기 — 서비스에 위임

👉 단순한 "함수"가 아닌 백엔드 엔드포인트처럼 취급하세요.

🔹 9. Server Actions의 장단점

✅ 장점

보일러플레이트 감소 (API 경로 불필요)
더 빠른 반복과 깔끔한 코드
RSC와의 긴밀한 통합
소규모 및 중규모 프로젝트에 적합

❌ 단점

실험적 기능 → 호환성 변경 가능
때로는 디버깅이 어려움 (숨겨진 내부 호출)
대규모 시스템의 경우, 외부 클라이언트용으로 API 경로가 여전히 유용함

🔹 10. Next.js 풀스택 개발의 미래

Server Actions는 패러다임 변화를 나타냅니다:

API가 내부 앱 로직에서 선택사항이 됨
프론트엔드 개발자가 인라인으로 백엔드 코드 작성 가능
낙관적 UI와 Suspense가 앱을 극도로 빠르게 느끼게 만듦
Edge Functions, Vercel AI SDK, Middleware와 결합하여 진정한 풀스택 React 가능

🎯 마지막 생각

Next.js는 항상 프론트엔드와 백엔드를 연결하는 것에 관한 것이었지만, Server Actions는 한 걸음 더 나아갑니다:

보일러플레이트 API 없음
컴포넌트 내부의 안전한 백엔드 로직
데이터베이스 중심 앱에 완벽하게 적합

2025년 React/Next.js 개발자라면, Server Actions 마스터하기는 더 이상 선택이 아닙니다 — 이것이 풀스택 웹 개발의 미래입니다. 🚀

출처: Next.js 15 & Beyond: Mastering Server Actions for Full-Stack React by The NewGenCoder on Medium

⚡ next.js 15과 그 너머: 풀스택 react를 위한 server actions 마스터하기