개념

1. Server Actions은 서버에서 실행되는 비동기 함수이다.
2. Server 와 Client Components에 모두 사용될 수 있다.

컨벤션

Server components

함수는 async 함수로 정의되어야 하고 "use server" 지시어를 사용해아한다. 별도의 파일을 이용하여 export하고 잇다면 파일 맨 위에 정의하면 될 것이고 컴포넌트 안에서 정의했다면 함수 안에 "use server"를 함수 body 맨 위에 작성하라

Client Components

클라이언트 컴포넌트에서 server action을 사용하기 위해서는 오직 import actions으로 할 수 있다.
Server Action을 클라이언트 컴포넌트에서 콜하기 위해서 "use server"를 맨 위에 직접 추가한 파일을 만든다.

Prop으로 클라이언트 컴포넌트에서 server actions을 넘길 수 있다.

Behavior

• 서버 액션은 form element 의 action 속성을 이용해 호출될 수 있다.
  server components는 점진적인 발전을 제공합니다. 즉, 폼은 자바스크립트가 로드되지 않았거나 불가능할 때도 폼은 제출될 수 있습니다.
  client components에서 서버 액션을 호출하는 폼은 큐에 제출될 것입니다. 클라이언트 hydration의 우선 순위를 지정합니다. hydration 후에 브라우저는 폼의 제출을 refresh하지 않을 것 이다.

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

소감

완전 편하다. endpoint 주소를 만들 필요가 없어서
1.개발시간이 단축되었고 2.백의 규모가 워낙 작다보니 나름 보기 깔끔하다.
현실 지금 db에 넣다뺐다만 이해했는데 다만 백을 고도화하려고 할때 어떻게 활용해야할지는 잘 모르겠음
php 처럼 코드가 더러워진다는 비난 의견을 보았는데 토이프로젝트에서는 체감이 안되었고 편해서 사용하기 편했다.

출처:https://www.youtube.com/watch?v=C5NnVfbNpq8

custom server