Next.js에서 Route Handler와 Server Actions의 차이점

Next.js를 사용하면서 데이터 페칭을 할 때, "Route Handlers"와 "Server Actions"라는 두 가지 주요 방법이 있습니다. 이 두 가지는 각각의 목적과 사용 사례가 다릅니다.

 

주요 차이점

• 공개 여부: Route Handlers는 외부에서 API처럼 호출할 수 있지만, Server Actions는 주로 내부 로직에서 사용됩니다.

• 설정의 용이성: Server Actions는 설정이 간단하며, 클라이언트와 서버 컴포넌트 모두에서 호출할 수 있습니다.

• 응답 형식 제어: Route Handlers는 다양한 응답 형식을 반환할 수 있어 더 유연한 제어가 가능합니다.

• 사용 사례: Route Handlers는 복잡한 서버 로직이나 외부 호출을 위한 API에 적합하며, Server Actions는 폼 데이터 처리나 간단한 이벤트 핸들링에 적합합니다.

 

Route API를 사용하면 외부에서 악의적인 사용자가 API를 통해 데이터를 조작할 위험이 있습니다. 이를 방지하기 위해 서버 액션(Server Actions)을 사용하여 내부 로직으로 숨길 수 있습니다. 이렇게 하면 API가 외부에 노출되지 않고, 애플리케이션 내부에서만 안전하게 데이터를 처리할 수 있습니다.

 

공개 API를 사용하는 경우 (Route Handlers)

만약 공개 API를 통해 POST 요청을 처리하게 되면, 외부에서 누구나 해당 API를 호출하여 데이터를 작성할 수 있습니다. 예를 들어, 다음과 같이 공개된 API를 설정할 수 있습니다.

 

// app/api/post/route.js
export async function POST(request) {
    const data = await request.json();
    // 데이터베이스에 새로운 포스트를 저장하는 로직
    await savePostToDatabase(data);
    return new Response(JSON.stringify({ success: true }), { status: 201 });
}

 

위의 예시에서는 /api/post 엔드포인트를 통해 POST 요청을 처리합니다. 이 엔드포인트는 외부에서 호출될 수 있기 때문에 보안상의 위험이 있습니다.

 

서버 액션을 사용하는 경우

반면, 서버 액션을 사용하면 이러한 작업을 내부적으로 처리할 수 있습니다. 서버 액션은 클라이언트에서 직접 호출할 수 없으므로 외부 공격으로부터 더 안전합니다.

 

// app/lib/actions/postActions.js
export async function createPost(data) {
    // 데이터베이스에 새로운 포스트를 저장하는 로직
    await savePostToDatabase(data);
}
// 서버 컴포넌트에서 서버 액션을 호출하여 사용
import { createPost } from '@/lib/actions/postActions';
export default async function PostComponent() {
    const handleSubmit = async (event) => {
        event.preventDefault();
        const data = {
            title: event.target.title.value,
            content: event.target.content.value,
        };
        await createPost(data);
        // 성공 시 사용자에게 알림
    };
    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="title" placeholder="Title" required />
            <textarea name="content" placeholder="Content" required></textarea>
            <button type="submit">Create Post</button>
        </form>
    );
}

 

결론

서버 액션을 사용하면 API 엔드포인트가 외부에 노출되지 않아 보안상 더 안전합니다. 이는 특히 민감한 데이터나 중요한 작업을 처리할 때 매우 유용합니다. 공개 API(Route Handlers)는 외부에서 데이터를 접근하거나 사용할 필요가 있을 때 유용하며, 서버 액션은 내부 로직을 보호하고 보안을 강화하는 데 적합합니다.

따라서, 공개 API로 인해 발생할 수 있는 보안 문제를 피하기 위해 중요한 기능이나 데이터 처리 로직을 서버 액션으로 이동하는 것이 좋습니다. 이를 통해 악의적인 사용자가 접근할 수 없도록 보호할 수 있습니다.