[Next.js] Server Action

Server Action?
서버에서 실행되는 비동기 함수.
API URL을 작성하고 이를 호출하여 처리하는게 아닌, 작성한 비동기 함수를 서버에서 직접 실행하도록 해준다.

• React Server Action은 비동기 코드를 서버에서 직접 실행할 수 있게 해준다. 데이터를 변경해야할 때 API 엔드포인트를 만드는대신 서버에서 동작하는 비동기 함수를 작성할 수 있게 해준것이다.
• Server Action은 Next.js의 캐싱과도 깊게 연관되어 있다. form이 Server Action을 통해 제출되었을 때 data를변경하는 뿐만 아니라, revalidatePath와 revalidateTag와 같은 API들을 이용하는 것으로 연관된 캐시들을 다시 업데이트 할 수 있다.

'use Server'

• 위 라인을 파일의 최상단에 작성함으로써, 해당 파일에서 export되는 모든 함수가 서버 함수임을 표시한다. 이 서버 함수들을 클라이언트 또는 서버 컴포넌트에 import되어 다양하게 사용될 수 있다.
  물론 이렇게 파일을 따로 분리하는 것 뿐만 아닌, 서버 컴포넌트의 action 내부에 'use server'를 추가하는 것으로 직접 Server Actio을 작성할 수도 있다.

Server Action 조건

• Next.js 13.4 버전 이상
• next.config.mjs(or js) 파일을 열어 아래와 같이 설정을 해야 한다.

Server Component에서 Server Action 사용하기

• 서버 컴포넌트내에 비동기 함수를 작성하고, 함수 본문에 'use server' 지시어를 지정해주면 된다.

Client Component 및 Server Component에서 Server Action 사용하기

• 클라이언트 컴포넌트내에 직접 서버 액션 함수 작성은 불가능하다. module로 작성된 서버 액션 함수를 import하여 사용해야 한다.
• 서버 컴포넌트는 직접 서버 컴포넌트 내 작성 또는 'use server' 지시어를 가진 모듈을 import 해서 사용도 가능하다.

Server Action 함수를 어디에 바인딩?

• form 태그 action prop
• formAction prop
• useTransition() 훅에서 제공해주는 startTransition과 사용

Next.js에서 서버액션은 HTML

요소와 연동하여 사용할 수 있다. 이를 통해 사용자의 폼 제출을 서버에서 처리하고 결과를 동적으로 반환할 수 있다. 폼 요소에 action 속성을 사용하면, 서버 액션은 폼이 제출될 때 자동으로 호출된다. 이 과정에서 서버 액션은 form 에서 제공하는 formData 객체를 자동으로 받아 처리한다.

• 서버 액션은 비동기 함수로 정의되어 백에드에서 데이터처리와 같은 비동기 작업을 수행할 수 있다. HTTP 'POST'메소드는 서버 액션을 통해 자동으로 처리되며, 이는 클라이언트와 서버 간의 데이터 전송을 위해 주로 사용된다.

  Page 사전 렌더링 (pre-rendering) & 데이터 페칭 (Data Fetching)

• Next.js를 사용하려면 SSR 개념과 Hydrate의 개념에 대해 숙지하고 가야한다.

  SSG와 Hydrate란?

• Next.js는 앱을 빌드하는 시점에 사전 생성한 정적 페이지 (pre-rendering)와 번들링 된 JS 파일을 Server Side단에서 클라이언트로 보낸 뒤, 클라이언트단에서 전달받은 HTML 코드와