서버액션은 단순하게 말하면 비동기 함수이다.
함수인데 서버에서 실행되는 함수이다.
next.js는 서버에서 실행되는 서버 컴포넌트, 브라우저에서 실행되는 클라이언트 컴포넌트로 구분지어져 있다.
파일 최상단에 use server라고 붙어있으면 서버 컴포넌트이다.
use client라고 붙어있으면 클라이언트 컴포넌트이다.
그런데 이제 '각 컴포넌트들에서 임포트해서 그대로 사용할 수 있는 서버에서 실행되는 함수다'라고 생각하면 된다.
//app/acitons.ts
'use server'
export async function create(){
//...
}위의 actions.ts파일 안에 use server가 최상단에 붙어있다.
즉 이 파일에 있는 모든 코드들은 서버에서 동작하게 된다.
그럼 create를 하는 어떤 오퍼레이션이 있다고 가정하자.
create함수 안에는 DB접속을 해도 되고, 어떠한 행동을 해도 상관이 없다.
그냥 서버라고 생각하면 된다.
그럼 create함수를 원래는 클라이언트에서 사용을 하려면 어떤 API를 뚫어주거나 하는 작업이 필요할 것이다.
import {create} from "@/app/actions';
export function Button(){
return (
// ...
)
}그런데 그런 과정 없이 그냥 create라는 이 함수를 가져다가 클라이언트에서 바로 사용을 한다.
Button의 return문 안에서 create를 바로 사용하게 될 것이다.
Next.js의 서버 액션 같은 경우에는 이 함수를 바로 썼을 때 이걸 자동으로 인지를 하고 API를 뚫어준다.
즉 서버와 클라이언트가 자동으로 소통을 할 수 있게 API를 자동으로 다 뚫어준다.
그냥 서버 코드를 정의하고 그 함수를 가져다가 쓰면 되는 것이다.
즉 별로도 API를 구현할 필요가 전혀 없어진 것이다.
