[Next.js] Route Handler와 Server Action

◼ Router Handlers

Route Handlers는 웹 요청 및 응답을 처리하는 API입니다. HTTP를 배우면서 웹 환경에서 요청과 응답을 주고받는 방법을 익혔으며, 이는 주로 REST API로 설명됩니다.
Route Handlers에서는 "GET / POST / PATCH / PUT / DELETE"와 같은 HTTP 메서드를 구현할 수 있습니다.
app 디렉터리 내에 route.ts 파일이 있으면, Next.js는 이를 Route Handlers로 인식합니다.

export async function GET(request: Request) {
  console.log("GET /api/test");
}

export async function POST(request: Request) {
  console.log("POST /api/test");
}

export async function PUT(request: Request) {
  console.log("PUT /api/test");
}

export async function DELETE(request: Request) {
  console.log("DELETE /api/test");
}

export async function PATCH(request: Request) {
  console.log("PATCH /api/test");
}

◼ Server Action

Server Actions는 서버에서 실행되는 비동기 함수입니다. 주로 폼 제출과 같은 데이터를 처리하는 데 사용됩니다.
Server Actions를 사용하려면, 파일 상단에 "use server" 지시어를 추가해야 합니다.
서버 컴포넌트와 클라이언트 컴포넌트 모두에서 사용할 수 있으며, 주로 CRUD 작업을 수행하는 데 활용됩니다. Server Actions를 클라이언트에서 사용할 경우, 모든 서버 요청이 POST로 전환되는 것을 확인할 수 있습니다.

"use server";

import { Product } from "@/type/product";
import { BASE_URL } from "@/constants/api";

export async function getProducts() {
  const res = await fetch(`${BASE_URL}/products`, {
    cache: "no-store",
  });
  const data: Product[] = await res.json();

  return { data };
}