Lesson2

2. Lesson 2 (기본 사용): 클라이언트 컴포넌트에서 useQuery로 데이터 가져오기.

데이터 가져오기 (Fetching)

Next.js App Router에서 데이터를 가져오는 두 가지 주요 방식을 직접 구현

1. 두 가지 방식 비교

RPC(Remote Procedure Call): 서버의 함수를 마치 내 컴퓨터에 있는 함수처럼 호출하는 기술

2. Server Action의 역할 (BFF 패턴)

* 단순히 DB를 조회하는 것뿐만 아니라, 프록시(Proxy) 역할도 수행합니다.

* 보안: API Key 등 민감한 정보를 브라우저에 노출하지 않고 외부 API를 호출할 수

있습니다.

* CORS 해결: 서버 간 통신이므로 브라우저 CORS 정책의 영향을 받지 않습니다.

3. TanStack Query와의 조합

* 어떤 방식(API Route, Server Action)이든 useQuery의 queryFn으로 사용될 수 있습니다.

* Server Action 사용 시: queryFn: () => action() 형태로 함수를 감싸서 전달하면 됩니다.

---

✅ 결론

> " Next.js 내부에서만 데이터를 쓰는 경우, Server Action을

사용하는 것이 개발 속도(타입 지원)와 보안 면에서 훨씬 유리합니다!"

구현

** 웹서버 api단 찌르기 (Route Handler)

• Client(useQuery) → 웹서버 (’/api/…’) → Next.js Route Handler → 데이터 통신

* 설명:

* useQuery의 queryFn 안에서 fetch 함수를 직접 호출합니다.

* 브라우저는 /api/products 같은 URL 주소로 편지(HTTP Request)를 보냅니다.

* Next.js가 이 편지를 받아서 route.ts 파일의 GET 함수를 실행합니다.

** Server Action

• Client(useQuery) → ‘function Call’ → Next.js Server Avtion → 데이터 통신

* 설명:

* useQuery의 queryFn 안에서 getProductsServerAction() 함수를 호출합니다.

* 브라우저는 자동으로 Next.js 내부 주소로 암호화된 요청(POST)을 보냅니다. (이걸 RPC:

원격 프로시저 호출이라고 합니다.)

* Next.js가 이 요청을 받아서 actions.ts 파일의 해당 함수를 실행합니다.

---

결론

🧐 선생님의 한 포인트 레슨 (이것만 기억하세요!)

두 방식의 결정적인 차이는 "누가 주소(URL)를 관리하는가?"입니다.

1. API 방식: 개발자(나)가 직접 주소(/api/products)를 짓고 관리해야 합니다.

2. Server Action: Next.js가 알아서 내부적으로 주소를 관리해 줍니다. (나는 함수 이름만

알면 됨!)