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

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

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

1. 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로 나가는 요청엔 적용되지 않는건가? 라는 생각이 드는데 이게 맞는건가요?

2. middleware

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

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

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

1. page.tsx에 해당하는 URL 요청 - middleware 실행

2. 이후, page.tsx에 존재하는 데이터 패칭 진행 - middleware 실행 x

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

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