Next.js Server Action : 코드 간소화와 최적화된 사용자 경험

 

서론

Next.js는 최신 웹 개발 트렌드와 요구를 반영하며 지속적으로 발전해왔다. 특히 서버 액션은 웹 애플리케이션의 사용자 경험을 크게 향상시키는 기능으로 주목받고 있다. 이번 포스트에서는 서버 액션의 이점, 전통적인 방식과의 비교, 그리고 이를 활용한 실제 예제를 살펴보았다.

1. 서버 액션의 개요

서버 액션은 클라이언트 측에서 서버로의 요청을 간소화하는 방법으로, Next.js의 새로운 기능 중 하나다. 이를 통해 개발자는 API 엔드포인트를 따로 만들 필요 없이 서버에서 직접 데이터를 조작할 수 있었다. 덕분에 코드의 복잡성이 줄어들고, 개발자가 비즈니스 로직에 집중할 수 있는 환경이 조성되었다.

1.1 서버 액션의 필요성

전통적인 웹 개발 방식에서는 클라이언트가 서버에 데이터를 전송하기 위해 API 요청을 명시적으로 작성해야 했다. 이러한 과정에서 발생하는 문제를 해결하기 위해 서버 액션이 도입되었다.

1.2 전통적인 방식과의 비교

구식 방식에서는 다음과 같은 단계가 필요했다:

• HTML 폼을 생성하고, 사용자 입력을 처리하기 위해 이벤트 핸들러를 구현해야 했다.
• API 엔드포인트를 설정하고, 데이터를 JSON 형식으로 변환한 후 서버에 요청해야 했다.
• 상태 관리 및 에러 처리를 위한 추가 로직이 필요했다.

반면, 서버 액션을 사용하면 이러한 복잡한 과정을 간소화할 수 있었다.

2. 서버 액션의 장점

서버 액션을 도입함으로써 웹 개발은 여러 가지 이점을 얻게 되었다.

2.1 코드의 간소화

서버 액션을 사용하면 API 요청을 직접 작성할 필요가 없었다. 클라이언트 측에서 서버 함수를 호출하는 방식으로 간결함을 유지할 수 있었다. 이를 통해 코드량이 줄어들고 가독성이 향상되었다.

2.2 상태 관리의 용이함

전통적인 방식에서는 로딩 상태를 관리하기 위해 별도의 상태 변수를 설정해야 했다. 그러나 서버 액션을 사용하면 useFormStatus와 같은 훅을 활용하여 로딩 상태를 쉽게 관리할 수 있었다. 이 훅은 폼의 제출 상태를 자동으로 처리해 주었으며, 덕분에 개발자는 비즈니스 로직에 집중할 수 있었다.

2.3 낙관적 UI 업데이트

useOptimistic 훅을 통해 사용자는 폼 제출 후 즉각적으로 UI를 업데이트할 수 있었다. 이를 통해 서버의 응답을 기다리는 동안에도 피드백을 받을 수 있었으며, 사용자 경험이 대폭 개선되었다. 전통적인 방식에서는 이 기능을 구현하기 위해 많은 추가 코드가 필요했다.

2.4 점진적 향상

서버 액션은 클라이언트 측 자바스크립트가 로드되지 않는 경우에도 기본적인 기능이 작동하도록 설계되었다. 이는 웹 애플리케이션의 접근성을 높이고, 웹 페이지의 초기 로드 속도를 개선하는 데 기여했다.

3. 서버 액션 활용하기

다음은 실제 코드 예제를 통해 서버 액션을 어떻게 활용할 수 있는지 살펴본 내용이다.

3.1 기본 폼 생성

서버 액션을 사용하여 기본적인 폼을 생성했다. 다음은 간단한 할 일 목록을 추가하는 폼의 예이다.

"use client";

import { useFormStatus } from 'next/form';

export default function TodoForm() {
    const { pending } = useFormStatus();

    return (
        <form action={addTodo}>
            <input name="content" required />
            <button type="submit">
                {pending ? 'Adding...' : 'Add'}
            </button>
        </form>
    );
}

async function addTodo(formData) {
    const content = formData.get("content");
    // 데이터베이스에 추가하는 로직
    return { content };
}

3.2 서버 액션으로 데이터 처리

위의 예제에서 addTodo 함수는 서버에서 호출되는 함수로서 클라이언트의 입력 데이터를 처리한다. 이를 통해 데이터베이스에 새로운 할 일을 추가하는 간단한 로직을 구현할 수 있었다.

3.3 로딩 상태 관리

로딩 상태를 관리하기 위해 useFormStatus 훅을 사용하여 사용자에게 피드백을 제공했다. 사용자가 버튼을 클릭하면 버튼의 텍스트가 자동으로 "Adding..."으로 변경되어 피드백을 제공한다.

3.4 낙관적 UI 업데이트

서버에서의 응답을 기다리는 동안 UI를 즉시 업데이트하려면 useOptimistic 훅을 활용할 수 있었다.

import { useOptimistic } from 'next/optimistic';

async function addTodo(formData) {
    const content = formData.get("content");

    // 낙관적인 UI 업데이트
    useOptimistic(() => {
        // UI 업데이트 로직
    });

    // 데이터베이스에 추가하는 로직
    return { content };
}

4. 결론

Next.js의 서버 액션은 웹 개발의 복잡성을 줄이고 개발자가 비즈니스 로직에 집중할 수 있는 환경을 제공했다. 이를 통해 사용자 경험이 대폭 향상되고 코드의 가독성도 높아졌다.

나의 생각

  서버 액션을 활용하며 클라이언트와 서버 간의 복잡한 요청 과정을 단순화할 수 있다는 점이 특히 인상 깊었다. 기존 방식에서는 API 설계와 상태 관리에 많은 시간을 투자해야 했지만, 서버 액션을 통해 이를 효과적으로 줄일 수 있었다. 또한, 서버 액션을 사용하면서 UI와 데이터 로직이 보다 유기적으로 연결된다는 점에서 개발 효율성이 높아진 것을 느꼈다.

 

  개발 과정에서 가장 큰 고민은 서버 액션이 기존 방식에 비해 얼마나 생산성을 높여줄 수 있을지에 대한 의문이었다. 그러나 실제로 사용해 본 결과, 코드의 간소화와 유지보수의 용이성이 명확히 드러났고, 결과적으로 프로젝트의 속도와 품질이 모두 향상되었다. 이러한 경험은 앞으로 서버 액션을 더욱 적극적으로 활용해야겠다는 확신을 심어주었다.

 

  특히 낙관적 UI 업데이트를 적용하면서 사용자 경험이 얼마나 개선될 수 있는지 체감할 수 있었다. 서버 응답 지연이 사용자 인터페이스에 미치는 영향을 최소화할 수 있었고, 이는 현대 웹 애플리케이션에서 매우 중요한 부분이다. 앞으로도 이 기능을 다양한 프로젝트에 적용해 보고, 최적화된 활용법을 꾸준히 연구해 나가고 싶다.

 

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

Data Fetching: Server Actions and Mutations | Next.js