fetch 시 baseUrl 작업을 middleware에서? vs util함수에서?

Status

Done

Want to

baseUrl을 일일이 적어주는 것이 귀찮으니, api 요청하기 전에 full url로 변환해주는 작업을 하고 싶었다.

이것말고도 header에 accesstoken을 넣어주는 작업도 추후에 필요한 부분이었다.

A or B ?

이 작업을 어디서 할 것인가?

A : 요청 전처리를 할 수 있는 Middleware ?

B : 간편한 util 함수 ?

Try

middleware에서 하면, 컴포넌트에서 fetch를 호출하는 코드에 변경사항이 없기 때문에 이 방법을 채택하고 싶었다.(util은 작성한 함수를 import & 호출해야한다.)


import { NextRequest, NextResponse } from 'next/server';

export async function middleware(req: NextRequest) {
  const newUrl = new URL('/api/new-endpoint', req.url); // 새로운 URL 생성

  // 기존 요청 복제 및 새로운 URL로 전달
  const modifiedResponse = await fetch(newUrl.toString(), {
    method: req.method,
    headers: req.headers,
    body: req.body, // 필요 시 바디도 전달 (POST/PUT 등)
  });

  // 새 응답 반환
  return new Response(modifiedResponse.body, {
    status: modifiedResponse.status,
    headers: modifiedResponse.headers,
  });
}

src/middleware.ts

하지만..

middleware에서는 받은 요청의 부분을 url만 바꿔서 다시 요청(fetch)해야 하므로 추가적인 네트워크 비용이 발생.

Middleware에서는 스트림 기반의 Body 데이터를 다루기 어려울 수 있다고 한다.

Middleware는 Edge Runtime에서 실행되므로 일부 Node.js 기능(예: 파일 시스템 관련 모듈)은 사용할 수 없다고 한다.

이걸 감당하면서까지 굳이 이 방법을 채택할 이유는 없었다.

Finally

결국엔 한번의 요청과 여러 유연한 사용을 위해 util함수로 결정했다.


const BASE_API_URL = process.env.NEXT_PUBLIC_API_BASE_URL;

export const api = async (apiUrl: string, options: RequestInit) => {
  const response = await fetch(`${BASE_API_URL}${apiUrl}`, options);

  return response.json();
};

src/libs/api.ts

이제 fetch 하고 싶다면, 함수를 호출하자!