middleware NextRequest 에 대한 궁금증이 풀리지... - 인프런

Next + React Query로 SNS 서비스 만들기

middleware NextRequest 에 대한 궁금증이 풀리지 않습니다

작성

198

안녕하세요 제로초님! 제로초님의 강의를 듣고 난 이후로 여러가지 프로젝트를 진행하다가

middleware.ts 와 NextRequest 에 대해 궁금한게 생겼고 공식문서를 찾아봐도 관련 내용을 제가 못 찾는 것 같아서 이렇게 질문드리게 되었습니다.

NextRequest

NextRequest는 제가 보내는 요청(페이지에 대한 요청, api에 대한 요청 등)의 정보를 가지고 있는 것으로 알고 있습니다.

만약 클라이언트 컴포넌트 에서 (route handler가 아닌)외부 백엔드 api로 요청을 보냈을 때, 그 "요청의 헤더에 담긴 쿠키를 제거하고 싶다 " 라는 요구사항이 있을 때 다음과 같이 구현을 했습니다.

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

export async function middleware(request: NextRequest) {

  request.cookies.delete('accessToken');
  request.cookies.delete('refreshToken');
  console.log(request.cookies.getAll()); // 쿠키가 삭제된게 확인됨

}

이렇게 한다면 요청을 보내고 -> middleware에서 받은 뒤, 쿠키를 지우고 -> 이어서 요청을 진행

이렇게 되는 것으로 알고 있는데, 실제로는 401이 발생하지 않고 브라우저 network탭을 보면 헤더에 여전히 쿠키가 담겨 있습니다.

이걸 보고 NextRequest에서 삭제 및 수정한 쿠키는, 그 요청이 처리되는 동안만 (=Next.js 서버 내에서 처리될 때만) 유효하고 외부 백엔드 api로 나가는 요청엔 적용되지 않는건가? 라는 생각이 드는데 이게 맞는건가요?

middleware

정확히 middleware가 동작하는 시점이 궁금합니다.

저는 웹에서 진행되는 모든 요청 ( '페이지가 요청될 때' , 'api가 호출될 때' 등) 마다 미들웨어가 작동하는 것으로 알고 있습니다.

근데, 서버 컴포넌트(page.tsx)를 실행했을 경우에 다음과 같은 순서로 진행됩니다.

page.tsx에 해당하는 URL 요청 - middleware 실행
이후, page.tsx에 존재하는 데이터 패칭 진행 - middleware 실행 x

클라이언트 컴포넌트에서는 url요청과 데이터 패칭 2가지 경우 모두 middleware가 실행 됐었는데,

왜 서버 컴포넌트에서의 데이터 패칭을 할 때는 middleware가 실행 되지 않는건가요..?

next.js approuter middleware

답변 1

제로초(조현영)

지식공유자

네 NextRequest는 브라우저에서 넥스트 서버로 보낸 요청이지, 외부 백엔드 api로 보낸 요청이 아닙니다. 외부 백엔드 api로 보낸 요청 코드는 따로 있으실텐데요? 또한 쿠키 삭제를 위해서는 next/cookie라는 전용 패키지가 따로 있습니다.
src 폴더에 들어 있는 라우트가 실행될 때입니다. 데이터페칭이라는 게 어떤 주소를 말씀하시는 건가요? api routes인가요?

kraf

질문자

네, 클라이언트 컴포넌트 에서 외부 백엔드 api 로 fetch요청을 따로 하고 있습니다. 근데 이렇게 클라이언트 컴포넌트에서 외부 백엔드 api호출을 해도, middleware를 거치더라구요 (해당 api 요청에 사용된 헤더정보를 파악할 수 있음)

예를 들어, 외부 백엔드 api url이 /api/test 라면, 아래 NextRequest에 다음과 같이 찍혔습니다.
```
export async function middleware(request: NextRequest) {
  const currentPath = request.nextUrl.pathname;
  console.log(currentPath); // /api/test
}
```
그래서 혹시 NextRequest에서 실제 api에 영향을 주는 추가적인 조작이 가능한건가? 싶었습니다.

서버 컴포넌트 에서 그냥 외부 백엔드 api로 데이터 패칭을 한 것입니다. 근데 말씀해 주신 것처럼 "src 폴더에 들어 있는 라우트가 실행될 때" middlware가 실행되는건 맞는데,

1번에서 언급했던 것처럼 클라이언트 컴포넌트에서 외부 백엔드 api로 요청을 했을 때도 해당 api요청 정보가 middleware에도 잡히더라구요.

근데 서버 컴포넌트에서 외부 백엔드 api로 요청을 하면 또 middleware에서 잡히지 않아서 의문이 생겼었습니다.

제로초(조현영)

지식공유자

외부 백엔드 api url이 /api/test라고요? 앞에 도메인 없이요? fetch('/api/test')를 하시는 거면 넥스트 서버의 api routes가 호출됩니다. fetch('백엔드도메인/api/test')를 하셔야 됩니다. 이게 명확해져야 2번도 답변드릴 수 있을 것 같습니다.

kraf

질문자

앗... 죄송합니다 확실한 제 상황을 전달해드리지 못했네요ㅠ

넥스트 서버의 api routes로 호출하는게 아니고 외부 백엔드 api로 호출하는게 맞습니다.
/api 로 시작하는건 현재 next.config.js 파일의 rewrites로 프록시를 사용하다 보니 그런 것입니다.

그래서 실제로는 fetch('백엔드도메인/api/test') 로 요청이 가고 있는 상황입니다.

제로초(조현영)

지식공유자

rewrites에서도 미들웨어 작동합니다. 클라이언트에서는 rewrites를 쓰고 있어서 미들웨어작동하고, 서버에서는 rewrites가 아니라 직접 도메인으로 요청보내고있어서 작동 안 하는거 아닌가요

인프런 커뮤니티 질문&답변

middleware NextRequest 에 대한 궁금증이 풀리지 않습니다