API Routes? ServerAction차이

이지영·2024년 10월 19일

Next 톺아보기

둘의 차이를 설명하기에 앞서, API Routes 와 ServerAction 각각의 개념에 대해서 정리해보겠다.

API Routes:

1. 디렉토리 구조:

App Router에서는 API Routers를 app디렉토리 안에 api서브 디렉토리르 생성하여 관리한다.
예를 들어, app/api/user/route.js파일을 생성하면 api/user엔드 포인트가 생성된다.

2. HTTP메서드 처리

기본적으로 GET, POST, PUT, DELETE등의 메서드에 대한 핸들러를 개별적으로 정의할 수 있다.

3. 예시

4. Api Route호출:

클라이언트 측에서는 Fetch API를 사용하여 API Route를 호출할 수 있다

fetch('/api/hello')
	.then((res)=>response.json())
	.then((data)=>console.log(data))

API Router를 왜 사용하는가?

1. 백엔드 없이 API구축 가능

API Routes를 사용하면 별도의 백엔드 서버 없이도 API엔드 포인트를 쉽게 만들 수 있다. 이는 서버 관리의 복잡성을 줄여준다.

2. 프론트엔드와의 통합

API Routes를 통해 프론트엔드 애플리케이션과 데이터를 쉽게 주고받을 수 있다. 예를 들어, 사용자 인증, 데이터 제출, 외부 API호출 등을 처리할 수 있다.

3. 서버리스 환경에서의 배포:

API Routes는 서버리스 플랫폼에 쉽게 배포할 수 있어, 비용 효율적이고 확장성이 뛰어난 애플리케이션을 구축할 수 있다.

그럼 POST요청으로 받은 데이터는 어디에 저장되는가?

서버 메모리에 저장된다.
서버를 종료하고 재시작하면 해당 데이터는 사라진다.
db.json파일을 생성하여 저장하면 서버 종료 후 재시작 하더라도 사라지지 않는다.

ServerAction:

1. 서버 함수 호출:

클라이언트에서 직접 서버 측 함수를 호출할 수 있다. 이를 통해 HTTP요청을 별도로 작성할 필요가 없고, 함수 호출로 데이터 처리를 간단히 수행할 수 있다.

2. 비동기 처리: ServerActions는 비동기 작업을 지원한다.

서버에서 데이터를 가져오거나, 데이터베이스와 상호작용하는 등의 작업을 비동기적으로 처리할 수 있다.

3. 상태관리:

UI상태를 업데이트하는 데 필요한 데이터를 직접 처리할 수 있다.
사용자가 UI와 상호작용할 때 서버에서 처리된 결과를 즉시 반영할 수 있다.

4. 페이지 리로딩 없이 데이터 업데이트:

Server Actions를 사용하면 페이지를 리로딩하지 않고도 데이터를 업데이트할 수 있어 사용자 경험이 향상된다.

장점:

간편한 데이터 처리: 클라이언트에서 서버 함수를 직접 호출할 수 있어 데이터 처리 과정이 간편해진다.
더 나은 사용자 경험: 페이지 리로딩 없이 데이터 업데이트가 가능하며, 사용자 경험이 향상된다.
유지관리 용이: 서버와 클라이언트 코드가 더 일관되게 유지되며 코드가 더 간결해진다.

그럼 ServerAction은 서버 컴포넌트에서만 사용하나?

결론은 서버 컴포넌트에서 Server Actions를 사용할 수 없다.
클라이언트 컴포넌트에서 호출하여 서버 측 작업을 수행한다.
서버 컴포넌트에서는 데이터 fetching이나 처리 작업을 위해 다른 방법을 사용해아한다.

Api Routes와 ServerAction의 차이?

API Routes 는 사용자 인증, 데이터베이스 CRUD작업, 외부 API와의 통신 등 다양한 서버 측 로직을 처리할 때 사용한다.
ServerAction은 폼 제출, 동적 데이터 업데이트, UI상태 변경 등 사용자가 상호작용할 떄 필요한 서버 측 작업을 처리할 떄 적합하다.

차이점을 요약해보면