Next.js 서버액션: 서버와 클라이언트의 효율적인 소통방식

박은정·2025년 1월 31일
0

Next

목록 보기
5/7
post-thumbnail

1. 서버액션이란?

서버액션(Server Actions)는 use server 지시어를 사용해서 서버에서만 실행되는 함수이지만, 클라이언트에서도 호출할 수 있도록 설계된 기능입니다.

기존에는 클라이언트에서 API 라우트를 생성해서 서버 함수를 호출해야 했지만, 서버액션은 클라이언트에서 API 라우트를 거치지 않고 직접 서버 함수를 호출할 수 있게 해줍니다.

서버액션을 사용하면 간편하게 데이터를 가져올 수 있어서, 코드가 더욱 직관적이고 유지보수가 용이하다는 장점이 있습니다.

  • 기존방식: 클라이언트 → API Route → 백엔드 처리 → 응답 반환 → 클라이언트
  • 서버액션 방식: 클라이언트 → 서버 액션 실행 → 응답 반환

2. 서버액션의 동작방식

서버액션은 클라이언트에서 호출할 수 있지만, 실제 실행은 서버에서만 이루어집니다.
클라이언트가 서버액션을 호출하면, 모든 인수는 JSON 직렬화를 통해 변환되어 서버로 전송됩니다.
서버에서 실행된 후, 반환 값도 직렬화된 형태로 클라이언트로 전달됩니다.
이 과정은 API 요청과 유사하지만, 서버액션은 이를 더 간소화하여 API 엔드포인트 없이 실행할 수 있도록 도와줍니다.

JSON 직렬화 (Serialization) & 역직렬화 (Deserialization)

직렬화: 데이터를 JSON 형태의 문자열로 변환하여 전송할 수 있게 만드는 과정
역직렬화: 클라이언트에서 받은 JSON 데이터를 원래 자바스크립트 객체 형태로 변환하는 과정

3. 서버액션을 사용하는 이유

기존 API 엔드포인트를 통해 서버함수를 호출하는 방식에서 발생하는 문제점을 보완하고 해결하기 위해 사용합니다.

불필요한 API 코드 중복 및 관리 부담

기존 방식에서는 클라이언트가 서버의 기능을 호출하려면 API 엔드포인트를 따로 만들어야 했는데, 코드 중복을 유발하고 유지보수 비용을 증가시킵니다. 예를 들어, 데이터를 저장하는 기능을 만들기 위해 API 라우트, 서버의 데이터 처리함수, 클라이언트의 요청 코드를 각각 작성해야 합니다. 또한, API 엔드포인트를 별도로 만들 때 클라이언트와 서버 코드가 분리되면서 같은 프로젝트 안에서도 서로 다르게 관리되어 코드의 일관성이 떨어질 수 있습니다.

클라이언트에서 API 요청을 직접 보내기 때문에, API 엔드포인트가 외부에 노출될 가능성이 있습니다.
공격자는 API를 직접 호출하거나 요청을 변조할 수 있기 때문에, 이를 예방하기 위해 추가적인 인증 및 보안 조치가 필요합니다.

클라이언트에서 서버로 API 요청을 보내고, 서버가 이를 처리한 후 다시 응답을 반환하는 과정이 필요합니다.
이 과정에서 추가적인 네트워크 트래픽과 레이턴시가 발생하며 성능이 저하될 수 있습니다.

클라이언트 → 서버로 요청 → 서버에서 응답 → 클라이언트 반영 의 과정을 거치면서 네트워크 트래픽과 레이턴시가 발생합니다. 이때 네트워크 트래픽과 레이턴시가 높으면 성능이 저하될 수 있는 문제점이 있습니다.

네트워크 트래픽 (Network Traffic)

인터넷을 통해 데이터를 주고받는 양을 의미하며, 유저가 웹사이트를 방문하거나 동영상을 볼 때 컴퓨터나 스마트폰은 서버에서 데이터를 받아오는 것입니다.
예를 들어, 유튜브에서 동영상을 보면 많은 데이터(=트래픽)가 오가기 때문에 인터넷이 느려질 수 있는데, 이처럼 트래픽이 많아지면 서버의 부담이 커지고 비용이 증가할수 있습니다.
쉽게 말해, 내가 인터넷을 사용할 때 데이터가 얼마나 많이 주고 받았는지를 나타내는 것이 네트워크 트래픽입니다.

레이턴시 (Latency)

데이터를 주고 받는 데 걸리는 시간(지연 시간)을 의미합니다.
예를 들어, 친구에게 메시지를 보냈는데 바로 도착하지 않고 몇 초 후에 도착하는 것처럼, 인터넷에서 어떤 요청을 보냈을 때 응답을 받기끼지 걸리는 시간을 말합니다.
이처럼 레이턴시가 높으면 웹사이트가 느리게 로드되거나, 온라인 게임에서 반응이 늦어지는 문제가 발생합니다.

4. 서버액션의 장점

별도의 API 엔드포인트를 만들 필요 없이 클라이언트에서 직접 서버 로직을 호출할 수 있어서, API 요청을 작성하지 않고 필요한 로직만 작성하면 됩니다.
또한, 클라이언트에서 실행할 수 있는 코드와 서버에서 실행해야할 코드를 명확히 분리해서, 데이터베이스 접근이나 연산 수행을 서버에서만 실행해서 성능을 최적화할 수 있습니다.

5. 서버액션 사용 시 주의할 점

서버에서 실행되는 함수이기 때문에 DOM 조작이나 window 객체 접근이 불가능합니다.
상태 관리와의 연계를 신중하게 설계해야 하고, 데이터가 적절하게 반영되었는지 확인하면서 클라이언트와의 데이터 흐름을 고려해야 합니다.
서버에서 직접 실행되는 서버액션의 무분별한 호출은 서버의 부하를 증가할 수 있어서, 서버 리소스 사용을 고려해야 합니다.

profile
새로운 것을 도전하고 배운것을 정리하려 합니다.

0개의 댓글