[Next.js] Server Action(서버 액션)이란? 장점 및 단점 - 14버전

Server Action이란?

Next.js Server Action은 서버 측에서 실행되는 함수이며 페이지 렌더링 과정에 직접 참여합니다. 즉, 페이지가 클라이언트로 전송되기 전에 데이터를 가져오거나 비즈니스 로직을 처리하는 데 사용할 수 있습니다.

[Next.js] Server Action(서버 액션)

장점

• SEO 향상: SSR(Server-Side Rendering)을 통해 페이지 로딩 속도를 높여 검색 엔진 최적화(SEO)에 도움이 됩니다.
• 더 나은 사용자 경험: 페이지 로딩 시점에 데이터를 미리 준비하여 클라이언트 측 렌더링보다 더 부드러운 사용자 경험을 제공합니다.
• 보안 강화: 클라이언트 측에서 민감한 데이터를 노출하지 않고 서버 측에서 처리하여 보안을 강화할 수 있습니다.
• 서버 측 유효성 검증: 입력 데이터 유효성 검증을 서버 측에서 수행하여 클라이언트 측 공격을 방지할 수 있습니다.
• 다양한 라이브러리 지원: 서버 측에서 Node.js 환경을 활용하여 다양한 라이브러리를 사용할 수 있습니다.

단점

• 복잡성 증가: 서버 측 코드를 추가해야 하기 때문에 개발 및 유지 관리가 더 복잡해질 수 있습니다.
• 서버 부하 증가: 서버 측에서 더 많은 작업을 수행하기 때문에 서버 부하가 증가하고 비용이 발생할 수 있습니다.
• 클라이언트 측 기능 제한: 클라이언트 측에서만 작동하는 라이브러리 또는 기능은 사용할 수 없습니다.
• 디버깅 어려움: 서버 측 코드는 클라이언트 측 코드보다 디버깅이 더 어려울 수 있습니다.

사용 예시

• Form 제출: 로그인, 회원가입과 같은 form의 로직을 Server Action 안에서 처리 가능합니다.
• 데이터 동기화: 외부 API로부터 데이터를 가져오거나 데이터베이스를 조회하는 코드를 Server Action에 배치할 수 있습니다.
• 파일/이미지 업로드: 사용자의 업로드를 다루는 일을 서버 측에서 안전하게 할 수 있습니다

/actions/todo

"use server";

import { revalidatePath } from "next/cache";
import postgres from "postgres";
import { z } from "zod";

let sql = postgres(process.env.DATABASE_URL || process.env.POSTGRES_URL!, {
  ssl: "allow",
});

// CREATE TABLE todos (
//   id SERIAL PRIMARY KEY,
//   text TEXT NOT NULL
// );

export async function createTodo(
  prevState: {
    message: string;
  },
  formData: FormData,
) {
  const schema = z.object({
    todo: z.string().min(1),
  });
  const parse = schema.safeParse({
    todo: formData.get("todo"),
  });

  if (!parse.success) {
    return { message: "Failed to create todo" };
  }

  const data = parse.data;

  try {
    await sql`
      INSERT INTO todos (text)
      VALUES (${data.todo})
    `;

    revalidatePath("/");
    return { message: `Added todo ${data.todo}` };
  } catch (e) {
    return { message: "Failed to create todo" };
  }
}

export async function deleteTodo(
  prevState: {
    message: string;
  },
  formData: FormData,
) {
  const schema = z.object({
    id: z.string().min(1),
    todo: z.string().min(1),
  });
  const data = schema.parse({
    id: formData.get("id"),
    todo: formData.get("todo"),
  });

  try {
    await sql`
      DELETE FROM todos
      WHERE id = ${data.id};
    `;

    revalidatePath("/");
    return { message: `Deleted todo ${data.todo}` };
  } catch (e) {
    return { message: "Failed to delete todo" };
  }
}

주의 사항

• Server Action은 서버에서 실행되므로 클라이언트만 사용할 수 있는 웹 API에는 직접 접근할 수 없습니다 (예: window, localStorage).
• Overfetching을 방지해야 합니다. 필요 이상의 데이터를 서버에서 불러오는 것은 성능에 악영향을 미칠 수 있습니다.

Next.js Server Action과 비교 가능한 기능

• React Server Components: 비슷한 기능을 제공하지만, 더 높은 수준의 추상화를 제공하며, 컴포넌트 기반 개발 방식을 사용합니다.
• getServerSideProps: 페이지 렌더링 과정에 사용되는 데이터를 미리 준비하는 데 사용됩니다.

Server Action vs API 선택 기준

실행 환경	서버 측	서버 측
데이터 접근	서버 측 데이터에 직접 접근 가능	API endpoint를 통해 접근
클라이언트 액세스	컴포넌트 내 코드로 직접 호출	HTTP 요청을 통해 호출
사용 예시	민감한 데이터 처리, 실시간 업데이트 불필요한 로직	재사용 가능한 데이터 로직, 실시간 동기화

• 민감한 데이터: 비밀번호, 결제 정보 같은 경우, API로 노출시키는 대신 Server Action이 적합합니다.
• 실시간 업데이트: WebSockets 등 실시간 동기화가 필요한 기능은 일반적인 API에서 처리합니다.
• 재사용성: 앱 여러 곳에서 재사용되는 데이터 가져오기나 로직은 API가 더 낫습니다.

결론

Next.js Server Action은 SEO, 사용자 경험, 보안 측면에서 장점이 있지만, 복잡성 증가, 서버 부하 증가, 디버깅 어려움 등의 단점도 존재합니다. 사용 목적과 상황에 따라 장점과 단점을 고려하여 적절하게 사용하는 것이 중요합니다.

 

Next.js 서버 액션 공식 문서

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

 

관련 유튜브

https://youtu.be/dDpZfOQBMaU?si=wF37c53qiAZskbjm