Server Action이란?

규갓 God Gyu·2025년 2월 20일

면접질문

목록 보기
75/142

Next.js에서 제공하는 기능
서버에서 실행되며 브라우저에서 호출할 수 있는 비동기 함수
이 기능은 서버 로직을 직접 호출함으로써 클라이언트와 서버 간의 상호작용을 간소화할 수 있게 해줌
ex - 백엔드 서버와 API 통신을 하는 대신 Next 서버에서 데이터베이스에 직접 접근하는 식으로 활용할 수 있음

사용법
user server 디렉티브를 사용하여 정의할 수 있음
이 디렉티브는 함수가 서버에서만 실행되도록 지정

'use server';

export async function createReviewAction(data: FormData){
	const content = data.get('content');
    //데이터베이스 저장 등의 작업
}
//컴포넌트에서 사용
<form action={createReviewAction}>
  <textarea name="content" required />
  <button type="submit">Submit</button>
</form>

이러면 Server Action을 이용하면 폼이 제출될 때 해당 정보를 가지고 데이터베이스 저장과 같은 서버 작업 수행 가능

Server Action의 장점

  1. 클라이언트와 서버 간 상호작용 간소화
    기존엔 데이터베이와 관련된 처리를 위해 백엔드 API와 통신하는 방식을 사용했음
    만약 Server Action을 이용하면 백엔드 API와 통신하지 않고, Next 서버에서 직접 데이터베이스 작업을 수행할 수 있음
    이러한 점은 개발 생산성 향상에 도움이 됨
    또한 네트워크 통신을 줄여 성능 면에서도 이점이 있음

  2. Server Action 로직은 클라이언트에 전송되지 않음
    보안에 도움
    외부에 노출되면 안 되는 정보나 로직을 숨기는 데 활용
    더불어 클라이언트 단의 일부 로직을 Server Action으로 옮긴다면 번들의 크기가 줄어드는 데도 기여할 수 있음

  3. JS로드 이전 시점에도 서버와 상호작용 가능
    html의 form의 action 속성을 이용하여 폼 데이터를 서버에 전송
    따라서 JS가 로드되지 않거나 비활성화되어도 서버와 통신이 가능하다는 장점

profile
웹 개발자 되고 시포용

0개의 댓글