Router Handler & Server Action

■ Router Handler

웹 요청 및 응답 API 를 사용해 특정 경로에 대한 커스텀 요청 핸들러를 만들 수 있게 함

* 응답API (REST API : GET / POST / PUT / PATCH / DELETE)

route.ts

app directory 내부에 route.ts 파일을 만나면 기본적으로 Next.js는 router handlers로 인식함!

 

☀︎  Pathname 으로 요청을 했을 때,
 - html 반환 시 → app router

 - json(계산된 데이터) 반환 시 → Route handler

 

* url path, pathname : 도메인(www.sample-web.com) 이후 따라오는 URL 부분

 

 

■ Server Action

서버에서 실행되는 비동기 함수, 서버 컴포넌트와 클라이언트 컴포넌트 모두에서 사용 가능, 주로 CRUD 작업에 사용

Router Handler 보다 가벼운 코드로 서버에서 함수 실행을 하고 싶을 때 주로 사용

 

파일 상단에 "use server" 지시어 넣어줄 것

함수 생성하여 export 해주기

"use server";

import { Product } from "./app/types";

export async function getProduct() {
  const res = await fetch("http://localhost:4000/products");
  const data: Product[] = await res.json();

  return { data };
}

 

* 클라이언트에서 Server Action 사용 시 모든 서버 요청이 POST 요청으로 변경됨