nextjs 서버액션에대한 궁금증

nextjs에서 서버액션에대해 학습하고 사용예제들을 보면서 프로젝트에 적용하려던중 궁금증이 생겼다.

지금 현재 nextjs 프로젝트에서 axios로 api통신하고, 리액트 쿼리로 그 결과를 캐싱하고, 데이터를 페칭, 동기화, 업데이트하려는 중인데, nextjs의 서버액션을 내가 굳이 지금 적용해보려는 이유가 뭘까? 

 

단순히 학습한것을 복습겸 적용해보고싶어서? 

아니면, axios,react-query보다 나은 이점이 있어서?

나의 얕은 지식으로는, 리액트18에서 나온 useTranslation훅이랑 같이 사용했을때 suspense fullback UI 이슈 문제 같은거 해결하기 편해보이는거와 코드 간소화가 된다는 정도와 서버액션을 사용하면 리액트18버전에서 나온 `new formData`를 통해 데이터를 주고받을 수 있어서 useState를 사용하지않아도된다는 이점이 있는걸로 알고있다. 하지만, 이것또한 react-hook-form으로 대체할 수 있다는 느낌이다.

 

그럼 nextjs의 서버액션 기능은 존재 이유가 뭘까?

 

그래서 현재 내가 인턴으로 있는 회사의 개발자분께 여쭤봤다.

---

 

선 요약, 후 정리로 먼저 요약하자면,

 

먼저 서버 액션은 html 폼 요소에서 주로 사용할 것으로 생각하고 만들어진 기능이라는것이다.

그 외에도 활용할 수는 있으나 next의 서버측 데이터 관리를 제대로 사용하려면 action과 fetch를 사용해야 하는데(여기서 fetch는 nextjs가 좀 변형한 fetch를 말한다.), react-query 등 다른 라이브러리와 비교해서 덜 떨어진 면이 많기 때문에 이걸 쓰는 프로젝트가 많지는 않다고 한다.

 

다른 회사는 어떨지 정확하지는 않지만,

지금 내가 소속해있는 곳에서 프로젝트를할 때 actions를 쓸 일이 거의 없다고 보면 된다고 한다.

 

다음은 답변자분께서 actions에 대해 좀 더 자세히 적은 내용을 정리한 글이다.

서버액션의 유용성

1. 클라이언트측 코드에서 서버 액션 함수를 호출하면 내부적으로는 https 통신으로 처리되어 서버 측 코드를 실행할 수 있게 된다.

 

2. form 태그 요소의 action 속성에 그대로 넣어서 폼 핸들러로도 사용할 수 있다.

(원래 action에는 함수가 아니라 url을 넣어야 하지만 next에서 적절히 처리해 주기 때문에, form 데이터를 제출받고 검증하는 서버측 로직이 필요할 때 endpoint를 따로 만들지 않고도 빠르고 간편하게 사용할 수 있음)

 

3. type-safe하다.

( fetch를 쓸 때 응답의 body 데이터가 타입 유추가 되지는 않지만, 서버 액션은 개발할 때는 그저 다른 파일에 있는 함수이기 때문에 타입스크립트 타입 유추 엔진이 잘 작동된다. )

 

하지만 역시 앞서 요약한 바를 보면,리액트 쿼리에 비해서 부족한 면이 많은것 같기에 자주 사용되진 않을것 같다.