7-1 개인적인 궁금증이 생겼습니다

한 입 크기로 잘라먹는 Next.js(v15)

7.1) 서버 액션을 소개합니다

작성

이번 장에서 서버액션에 관한 내용을 들었는데 유지보수 측면에서 이 기술이 좋은 방법일까 하는 의문이 들었습니다!

아래는 이런 경우가 생기지 않을까 해서 적어둔 내용입니다.

서버액션으로 프론트에서 "a를 오른쪽으로 옮겨주세요" 라는 api를 백엔드에 만들었습니다.
그런데 기존의 백엔드 api에선 a는 왼쪽으로 옮기는 스크립트를 만들어놨는데 서버액션으로 인해 백엔드 서버엔 예정에 없던 동작이 발생했습니다.
그러다 나중에 a를 오른쪽으로 옮긴것에 대해 문제가 발생해서 백엔드 코드를 하루 꼬박 세면서 뒤져봤는데 오류를 못 찾았습니다
그런데 알고보니 프론트에서 서버액션으로 보내는 a를 오른쪽으로 옮겨라는 코드 때문에 발생한 문제였습니다.

이런 상황이 실무에서 발생할거 같다는 생각이 들어서 이 서버액션 기능을 실제로도 많이 사용하는지 궁금합니다!!

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

백엔드 API 서버에서는 제공하지 않는 기능을, Next.js 서버에서 서버 액션으로 수행하였을때 백엔드 측에서 혼란이 생길수 있다 라는 문제를 지적하신게 맞으시다면, 그런 일도 충분히 발생할 수 있습니다. 물론 팀간 소통이 아예 없다는 전제 하에 그럴것 같긴 하네요

보통은 백엔드 API 서버가 존재하는 환경에서는 굳이 API 서버를 냅두고 서버 액션을 통해 데이터를 수정할 이유는 크게 없어보입니다. 서버 액션은 별도의 백엔드 API 서버가 존재하지 않는 환경을 타겟하여 만들어진 기능이라고 보시면 될 것 같습니다.

아! 물론 API 요청에 대한 내용을 아예 숨겨야 한다면 서버 액션을 거쳐 백엔드 서버로 요청을 보내는 경우도 많습니다. 브라우저 -> Next.js 서버의 서버액션 -> 백엔드 API 서버 같은 경로로 말이죠!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. wl990님.

서버 액션은 Next.js에서 새로운 기능으로, 프론트엔드와 백엔드의 경계를 허물고 보다 유연한 API 호출을 지원하는 것을 목표로 합니다. 하지만 이로 인해 말씀하신 것처럼 운영 환경에서 예상치 못한 문제가 발생할 수 있습니다.

서버 액션의 활용 장점과 주의사항

장점: 서버 액션을 사용하면 프론트엔드에서 직접 서버 함수를 호출하여 API를 구성할 수 있습니다. 이를 통해 복잡한 API 호출을 간소화하고, 빠른 데이터 처리를 가능하게 합니다.
주의사항:
- 서버 액션을 사용하면 함수 호출에 대한 추적이 어려워질 수 있습니다. 결론적으로 이는 의도하지 않은 서버 동작을 초래할 가능성이 있습니다.
- 코드의 복잡성이 증가할 수 있으며, 어떤 코드가 클라이언트인지 서버인지 파악하기 어려워질 수 있습니다.
- 유지보수 측면에서 기능별로 확실한 경계를 설정해야 합니다. 그렇지 않으면 오류 발생 시 원인 파악이 어려워질 수 있습니다.

실무 사용 사례

Next.js의 서버 액션은 아직 상대적으로 새로운 기능이며, 실무에서는 주로 신뢰할 수 있는 서비스나 빠른 프로토타이핑 단계에서 사용하도록 권장됩니다. 장기적으로는 별도의 백엔드 서비스와 API를 활용하여 명확한 경계를 설정하는 것이 좋습니다.

관련 질문과 답변을 참고하시면 도움이 될 수 있습니다:
- 서버 액션의 적절한 사용

위 답변이 wl990님의 질문에 도움이 되었기를 바랍니다. 유지보수와 안정성 측면에서는 팀의 프로젝트 관리 방식에 맞춰 서버 액션의 도입을 결정하는 것이 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변