Route Handler와 Server Action

 웹 애플리케이션의 기본 구조는 보통 클라이언트(브라우저)와 서버로 구성합니다. 클라이언트는 사용자와 상요작용하는 부분이고, 서버는 데이터를 처리하고 저장하는 부분입니다.

 

 클라이언트-서버 통신은 주로 HTTP 프로토콜을 통해 통신합니다. 클라이언트가 서버에 요청(request)을 보내면, 서버는 그에 대한 응답(response)을 보냅니다.

 

 Next.js의 역할을 React 기반의 프레임 워크로, 클라이언트 사이드 렌더링과 서버 사이드 렌더링 모두 지원합니다. 또한, API 라우트를 쉽게 만들 수 있게 해줍니다.

 

 이제 전반적인 웹 애플리케이션의 흐름을 알았으니 Route Handler와 Server Action에 대해 알아보도록 하겠습니다.

 

 

 

 

 

 

1. Route Handler

• 목적: API 엔드포인트를 쉽게 만들기 위한 기능입니다.
• 작동 방식: 특정 URL 경로로 들어오는 HTTP 요청을 처리합니다.

 

< 사용 예시 >

// app/api/hello/route.js
export async function GET(request) {
  return new Response('안녕하세요, Next.js!');
}

 

이 예시는 /api/hello 경로로 GET 요청이 오면 "안녕하세요. Next.js!"라는 메세지를 반환합니다.

 

 

 < 클라이언트에서 사용하는 방법 >

// 클라이언트 측 코드
async function fetchHello() {
  const response = await fetch('/api/hello');
  const data = await response.text();
  console.log(data); // "안녕하세요, Next.js!" 출력
}

 

 

 

 

 

 

 

 

 

2. Server Action

• 목적: 클라이언트에서 서버의 함수를 직접 호출하기 위한 기능입니다. 주로 폼 제출이나 데이터 수정 작업에 사용됩니다.
• 작동 방식: 클라이언트 컴포넌트에서 서버의 함수를 마치 일반 함수처럼 호출할 수 있게 해줍니다.

 

< 사용 예시 >

// app/actions.js
'use server';

export async function addTodo(formData) {
  const todo = formData.get('todo');
  // 데이터베이스에 todo 추가하는 로직
  console.log('새로운 할 일:', todo);
  return { message: '할 일이 추가되었습니다.' };
}

 

 

< 클라이언트 컴포넌트에서 사용하는 방법 >

// app/page.js
import { addTodo } from './actions';

export default function Home() {
  return (
    <form action={addTodo}>
      <input type="text" name="todo" placeholder="새 할 일" />
      <button type="submit">추가</button>
    </form>
  );
}

 

 

이 예시에서는 폼이 제출되면 addTodo Server Action이 Server Action이 자동으로 호출됩니다. 사용자가 입력한 할 일이 서버로 전송되어 처리됩니다.

 

 

 

 

 

 

 

 

 

 

3. Route Handler와 Server Action 주요 차이점

• Route Handler은 API 엔드포인트를 만드는데 사용되고, Server Action은 서버 사이드 함수를 직접 호출하는데 사용됩니다.
• Route Handler은 일반적으로 fetch를 통해 호출 되지만, Server Action은 폼 제출이나 특별한 훅을 통해 직접 호출됩니다.
• Server Action은 클라이언트 컴포넌트에서 쉽게 사용할 수 있고, 폼처리에 특화되어 있습니다.

 

 

 

 

 

 

 

 

 

 

 

이 두가지 방법을 통해 Next.js에서 서버 사이드 로직을 효과적으로 처리할 수 있습니다.