[NextJs] 서버 액션을 사용하면 클라이언트 구성 요소가 서버에서 실행되는 비동기 함수를 호출할 수 있습니다

[참고: Server Actions - react.dev]

Server Actions – React

[참고: Server Actions - next docs]

Data Fetching: Server Actions and Mutations | Next.js

리액트 18에서 시험적으로 도입된 기능중에 지시문이 존재합니다

Directives provide instructions to bundlers compatible with React Server Components.

 

지시문은 React 서버 컴포넌트와 호환되는 번들러에 대한 지침을 제공합니다. 

여기서 말하는 지침은 각각 아래와 같습니다

 

`use server`

'use server' marks server-side functions that can be called from client-side code.

즉 서버 로직의 함수를 클라이언트 컴포넌트에서 호출 가능하게 해주는 지시문입니다

 

사실 저는 공식문서를 보기 전까지는 `use server`의 역할은 해당 로직을 서버에서 처리되게만 해주는 것으로 이해하고있었습니다.

하지만 공식문서에서 강조하는 부분은 서버 로직을 클라이언트 코드에서 호출할 수 있게 해준다 였습니다

 

자세히 살펴보겠습니다

`use sever` 지시문이 명시된 함수는 서버에서 실행되어지게 됩니다.

이런 서버 함수를 클라이언트에서 호출하면 이 호출은 내부적으로 서버로의 네트워크 요청으로 변환됩니다

이 과정에서 함수에 전달되는 인자는 직렬화되어 전달됩니다.

요청을 받은 함수는 서버에서 실행된 후 결과를 반환합니다.

이 결과를 직렬화하여 클라이언트에 전달합니다.

직렬화된 결과를 받은 클라이언트에서 다시 역직렬화를 하여 마치 함수를 호출하고 사용하듯이 사용합니다

이러한 일련의 과정을 Server Action 이라고 합니다

 

이 과정에서 핵심은 직렬화입니다

직렬화는 객체나 데이터 구조를 전송하거나 저장하기 위해 일련의 바이트나 문자열 형태로 변환하는 과정을 뜻합니다.

사실 단어가 낯설어서 그렇지 데이터 요청등을 통해 데이터를 주고 받을 때 항상 직렬화된 데이터를 주고 받습니다

이렇게 서버 - 클라이언트가 데이터를 주고 받을 때는 데이터는 직렬화가 가능해야합니다.

하지만 사실 함수는 직렬화가 되지 않습니다.

그래서 nextjs의 문서를 보다면 서버 컴포넌트 - 클라이언트 컴포넌트 props 전달에 직렬화되지 않는 함수등은 주고 받을 수 없다 라고 명시가 되어있기도 합니다.

 

하지만 서버 액션의 경우 위의 과정처럼 실제로 함수를 주고 받는게 아니라 데이터(인자, 반환값)를 직렬화 하여 네트워크 요청을 처리하고, 각각의 사이드에서 해당 데이터들로 처리하기 때문에 가능합니다.

 

이제 다른 지시문인 `use client`를 살펴보겠습니다

`use client` 지시문을 통해 번들러는 해당 컴포넌트를 브라우저에서 실행되도록 처리합니다.

 

이게 전부입니다.

즉 `use client`는 해당 로직이 클라이언트에서 처리된다는 것을 지시하며, 이는 우리가 일반적으로 다루는 리액트입니다.

 

서버 액션에 도움을 주는 훅들

<추가 예정>

[참고: useFormStatus]

useFormStatus – React

[참고: useActionState]

useActionState – React