Next.js에서는 React의 Server Functions를 사용해 데이터를 업데이트할 수 있다.

이 페이지에서는 Server Functions를 생성하고 호출하는 방법을 설명한다.

1. Server Funcitons란 무엇인가?

Server Funciton은 서버에서 실행되는 비동기 함수다.

클라이언트에서 네트워크 요청을 통해 호출될 수 있기에 반드시 비동기 함수여야 한다.

actions context나 mutation context에서는 이를 Server Actions라고도 부른다.

일반적으로 Server Actions은 startTransition 과 함께 사용되는 async 함수를 의미한다.

그리고 아래와 같은 경우에는 Next.js가 이를 자동으로 Server Action으로 처리한다.

• <form> 의 action prop에 전달된 함수
• <button> 의 formAction prop에 전달된 함수
• Next.js에서는 Server Action이 프레임워크의 캐싱 아키텍처와 통합되어 있다.
• 액션이 호출되면 Next.js는 업데이트된 UI와 새로운 데이터를 한 번의 서버 왕복으로 반환할 수 있다.
• 내부적으로 Server Action은 POST HTTP 메서드를 사용하며 Server Action을 호출할 수 있는 유일한 메서드도 POST 이다.

2. Server Functions 생성하기 (Creating Server Functions)

Server Funtion(서버 함수)은 use server 지시문을 사용해 정의할 수 있다. 이 지시문은 비동기 함수의 맨 위에 작성하여 해당 함수를 Server Funtion으로 표시하거나, 파일 최상단에 작성하여 그 파일의 모든 export 함수들을 Server Funtion으로 표시할 수 있다.

• app/lib/acitons.ts

  export async function createPost(formData: FormData) {
    'use server'
    const title = formData.get('title')
    const content = formData.get('content')
  
    // 데이터 업데이트
    // 캐시 재검증
  }
  
  export async function deletePost(formData: FormData) {
    'use server'
    const id = formData.get('id')
  
    // 데이터 업데이트
    // 캐시 재검증
  }
  

2-1. Server Components

Server Components 안에서도 함수 내부에 “use server”를 작성해 inline 방식으로 Server Funtion을 만들 수 있다.