Server Action

Next.js에서 서버에서 실행되는 비동기 함수다.

사용하기 위해서 "use server"를 컴포넌트 최상단에 작성해야한다.
이 함수가 서버에서 실행되는 서버 액션임을 선언한다.

async를 작성해 비동기 함수를 동기함수처럼 동작시킨다.

"use server";

import { Product } from "@/type/product";
import { BASE_URL } from "@/constants/api";

export async function getProducts() {
  const res = await fetch(`${BASE_URL}/products`, {
    cache: "no-store",
  });
  const data: Product[] = await res.json();

  return { data };
}

함수 내부에 "use server"를 사용할 수 있다.
클라이언트 번들에 포함되지 않고 오직 서버에서 실행되기 때문에, 데이터베이스 접근이나 민감한 로직을 안전하게 처리할 수 있다.

export default function Page() {
  // Server Action
  async function create() {
    'use server'
    // Mutate data
  }
 
  return '...'
}

그래서 왜 사용하나?

• 자동 최적화 및 일관성 유지
  "use server" 지시문을 통해 해당 함수가 서버에서만 실행되어야 한다는 것을 인지하고, 이를 기반으로 최적화된 빌드 과정을 진행해준다.

• 개발 편의성
  Route Handler와 다르게 별도의 API 라우트를 구성할 필요 없이, 컴포넌트 내부에서 바로 서버 작업을 선언하고 사용할 수 있어 코드 구조가 간단해지고 유지보수가 용이하다.

• 보안 강화
  Server Action은 서버에서만 실행되기 때문에, 데이터베이스 접근, 인증, 민감한 비즈니스 로직 등 클라이언트에 노출되면 안 되는 작업들을 안전하게 처리할 수 있다.