use server 와 route.ts 이해하기

서버 컴포넌트와 Props

use server 지시자를 사용한 서버 컴포넌트는 props를 통해 데이터를 받을 수 있습니다. 예를 들어, 부모 컴포넌트에서 서버 컴포넌트로 데이터를 전달하면, 서버에서 렌더링될 때 이 props를 활용해 동적으로 콘텐츠를 생성할 수 있습니다. 이는 React의 컴포넌트 간 데이터 전달 방식과 유사하며, 서버 측에서 실행되는 특성을 갖습니다.

예시:

// 부모 컴포넌트
<ServerComponent data="안녕하세요" />

// ServerComponent.jsx
"use server";
export default function ServerComponent({ data }) {
  return <div>{data}</div>; // "안녕하세요" 출력
}

API 라우트와 데이터 처리

반면, API 라우트는 HTTP 요청을 통해 데이터를 주고받는 방식으로 동작합니다. API 라우트는 클라이언트의 요청에 응답하는 서버 측 엔드포인트 역할을 하며, Next.js에서는 pages/api 디렉토리에 핸들러를 작성해 구현합니다. 여기서는 use server 같은 지시자를 사용하지 않고, 대신 req (요청 객체)와 res (응답 객체)를 활용해 데이터를 처리합니다.

예시:

// pages/api/hello.js
export default function handler(req, res) {
  const { name } = req.query; // 클라이언트에서 보낸 쿼리 파라미터
  res.status(200).json({ message: `안녕, ${name}!` });
}

클라이언트에서 /api/hello?name=홍길동으로 요청하면, 서버는 { "message": "안녕, 홍길동!" }을 반환합니다.

차이점 요약

• 서버 컴포넌트: Props를 통해 부모로부터 데이터를 받아 서버에서 렌더링.
• API 라우트: HTTP 요청(GET, POST 등)을 받아 데이터를 처리하고 응답을 반환.

결론적으로, use server의 서버 컴포넌트는 props 기반으로 데이터를 받지만, API 라우트는 클라이언트 요청을 처리하는 전통적인 서버-클라이언트 모델로 작동합니다. 상황에 따라 적합한 방식을 선택하면 됩니다!