Next Server Actions

Server Actions는 Next에서 제공하는 기능으로, 서버에서 실행되는 비동기 함수이다. 이 기능은 Server Components와 Client Components 둘 다 사용이 가능하다.

무엇보다 서버에서 실행되는 함수이기 때문에 사용자에게 노출되지 않는다.

Server Components

서버 컴포넌트에서는 Server Actions를 사용할 함수의 바디 최상단에 'use server'를 추가해준다.

예시

const submit = async (formData: FormData) => {
    "use server";

    try {
      const response = await fetch(...);
    } catch (err) {
      console.error(err);
    }
  };

Client Components

클라이언트 컴포넌트에서는 Server Actions를 사용할 함수를 별개의 파일로 분리하여 이를 import해서 사용한다. 별개의 파일로 분리한 함수에서는 파일 최상단에 'use server'를 추가해준다.

예시

// app/_lib/fetching.ts
"use server";

export const submit = async (formData: FormData) => {
    try {
      const response = await fetch(...);
    } catch (err) {
      console.error(err);
    }
  };

import { submit } from "@/app/_lib/fetching.ts"

export default function Button (){
  return (
  // ...
  )
}

참고
Next + React Query로 SNS 서비스 만들기
Building Your Application: Data Fetching | Next.js
Next.js의 Server actions 기능