[11장][상훈] Next.js 13과 리액트 18

[bbearcookie]

퀴즈

Next.js 13.4에서 실험적으로 적용된 이후에, Next.js 14 버전과 React 19 버전에서 정식적으로 Server Action이 도입되었습니다.
그렇다면 이벤트 핸들러를 통해서 서버에게 API 요청을 처리했던 경우에 비해, Server Action을 사용한다면 어떤 이점이 존재하나요?

답

정답

먼저, 서버 액션은 클라이언트 컴포넌트가 서버에 있는 비동기 함수를 호출할 수 있도록 도와주는 기능입니다. React 19에서 stable로 도입된 form의 action 기능과의 통합도 가능하여, Form의 Submit 동작이 발생하면 서버의 비동기 함수를 호출하도록 할 수 있습니다.

그렇다면, 이러한 서버 액션을 도입했을 때의 장점은:

1. TTI가 빨라진다.
   • 기존의 이벤트 핸들러 방식으로는 Form 내용의 렌더링에 SSR을 적용하더라도 JS 번들을 실제로 받아온 뒤 하이드레이션 과정을 통해 이벤트 핸들러를 붙히기 이전에는 Form Submit이 불가능했습니다. 그러나, 서버 액션을 Form의 Action과 통합하는 경우, JS 동작 없이 HTML의 기본적인 action 속성으로 동작하는 것이기 때문에 JS를 불러오지 않고도 바로 인터랙션이 가능해집니다.
2. JS 번들의 크기가 줄어든다.
   • 서버 액션은 서버에서만 실행되는 함수이기에, RSC와 마찬가지로 클라이언트에게 전송되는 JS 번들에 포함되지 않습니다. 즉, 서버 액션 내에서 유효성 검사를 위해 zod 등의 라이브러리를 사용한다고 해도, 클라이언트의 번들 사이즈에 영향을 주지 않습니다.

https://react.dev/reference/rsc/server-actions
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>