[Next.js] Server Actions란?

 

Next.js의 Server Actions 란?

 

서버 및 클라이언트 컴포넌트에서 호출될 수 있으며 폼 제출 및 데이터 변경을 위해

서버에서 실행되는 비동기 함수입니다.

 

조금 더 쉽게 풀어쓰자면 API 엔드포인트를 만들 필요 없이 서버에서 실행되는 함수(Server Actions)를 사용해 Next.js 프로젝트 내에서 SQL쿼리를 작성하여 DB에 접근할 수 있도록 해주는 기능입니다.

(클라이언트 코드에서 직접 SQL를 실행하는 것은 아닙니다. Server Actions는 여전히 서버사이드에서 실행됩니다.

다만 다른 백엔드를 구축하여 연결할 필요가 없다는 것입니다. )

 

 

Next.js 14에서 발표한 Server Actions

 

Server Actions는 Next.js 14 출시와 함께 발표된 주요 기능이었고 이는 소개되자마자 개발자들 사이에서 큰 이슈가 되었습니다.

function Bookmark({ slug }) {
  return (
    <button
      formAction={async () => {
        "use server";
        await sql`INSERT INTO Bookmarks (slug) VALUES (${slug});`;
      }}
    >
      <BookmarkIcon />
    </button>
  )
}

 

왜냐면 이런 식으로 Next.js 코드 내에서 SQL 쿼리문을 마치 프론트엔드 코드처럼 작성하기 때문입니다. 

이는 기존 레거시 코드에서 볼 수 있는 방식이고 백엔드를 거치지 않고 감히(?) 프론트엔드에서 바로 데이터베이스에 접근하는 것처럼 보였기 때문에 논란이 되었죠. 기존의 백-프론트 분리 아키텍처에 익숙한 개발자들한테는 여러모로 낯설고 우려스러운 방식처럼 보였을 겁니다. 

 

 

PHP와의 유사성

 

특히 레거시 PHP 코드에서 데이터베이스 관련 로직이 View 로직과 혼합되어 있던 방식과 유사하게 느껴진다는 의견도 많았습니다. 그래서 이런 장난스러운 로고도 만들어졌습니다.

(다만 PHP는 페이지 요청마다 새로운 실행이 일어나고 Next.js의 Server Actions는 리액트 생태계 및 서버 컴포넌트와의 통합을 고려한 방식이기 때문에 완전히 같은 방식은 아닙니다. 실제 동작 방식은 다르고 밈은 재미로만 보시면 되겠습니다.)

 

그리고 온갖 밈을 만들어냈죠. 

 

 

왼쪽 이미지에 표현된 것과는 달리 제가 찾아본 결과 오히려 Server Actions 기능은 보안에 도움이 되는 기능이라고 합니다. 서버에서 비동기 작업을 처리하므로 오히려 클라이언트에서의 보안 취약점을 줄일 수 있다고 하네요.

(하지만 적절한 인증 및 권한 관리가 필요하다고 합니다. )

 

 

Server Actions의 이점 

 

원래 서버 컴포넌트 내에서 직접적인 사용자 상호작용에 의한 데이터 전송 및 수정은 불가능했었습니다. (데이터 불러오기는 기존에도 가능) Server Actions의 도입으로 인하여 서버 컴포넌트에서 form action을 이용해 데이터를 직접 서버에 전송하거나 데이터베이스를 수정하는 것이 가능해진 것입니다. 

 

[Next.js] Data Fetching: Server Actions and Mutations

Data Fetching: Server Actions and Mutations | Next.js

 

제가 SQL 쿼리문을 바로 작성하는 예시를 보여드렸지만 Server Actions는 단순히 데이터베이스와 직접적으로 상호작용하기 위한 기능만을 의미하는 것이 아닙니다.

 

Sever Actions는 서버에서 실행되는 비동기 함수이기에 서버 환경에서 할 수 있는 모든 작업을 수행할 수 있습니다. 

 

(예를 들면 이런 식으로 API 엔드포인트에 POST 요청을 보내는 것도 가능합니다.)

'use server';

export async function sendData(data) {
  const response = await fetch('https://kea.com/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
}

 

 

현재의 Server Actions 평가

 

시간이 지나고 Server Actions의 실제 동작 방식(클라이언트가 아니라 여전히 서버에서 실행된다는 것)과 서버 컴포넌트의 데이터 처리 편의성 등의 이점이 알려지면서 긍정적인 평가도 많아졌습니다.

 

 

"Server Actions 관련 또다른 밈(meme)

 

 

2069년. 
next js 42가 "use binary"를 소개합니다. 

 

 

 

당연히 실제는 아닙니다. 사람들이 재미로 만들었습니다.

 

심지어 이러한 밈 제조기 사이트까지 있습니다. 

 

 

+) "use server" 밈(meme) 생성기

 

그래서 저도 만들어봤습니다.. 음.. 하하 

(이미지 클릭 시 해당 사이트로 이동합니다.)

 

아무튼 이렇게 개발자들 사이에서 여러 가지 의미로 이슈가 되었던 기능입니다. 

 

헷갈리는 개념은 직접 구현해 봐야겠죠?

곧바로 다음 게시글에서 실습해 보겠습니다.