사건의 시작

fetch 할 때 headers 에 custom key/value 를 줘야하는 일이 생겼는데 모른 fetch 를 찾아서 header 에 하는 노가다는 가능한 피하고 싶어서 찾아본 결과 middleware 가 이러한 request 를 hooking 해서 headers 를 수정할 수 있다하여 로직을 넣어줬으나, 사수님께서 SSR 시 fetch 는 hooking 이 될지라도 CSR 할 때는 fetch 가 Hooking 이 안될 것이다 다시 생각해봐라고 하여 이 글이 시작되었다.

Middleware 란 무엇인가

nextjs 에서 middleware 는 Routing Section 에서 소개를 하고 있다.

middleware 는 content 가 캐싱되기 전 그리고 routing 이 매칭되기 전에 실행되는 영역으로 request 날리기 전에 로직을 넣을 수 있고 해당 request 에 의한 response 에 대해 추가적인 로직을 넣을 수 있는 말 그대로 middleware 역활을 수행한다.

SSR, CSR 그리고 Middleware

현재 프로젝트에서 next 의 API Routing 을 Mock-API 로 쓰고 있다. 그리고 Request 는 Fetch API 로 직접 Back-end API 를 Calling 하고 있다

ServerSide 에서는 NextJS Server - Back-End API 과정으로 request & response 가 이뤄지기에 Hooking 이 되지만 ClientSide 에서는 Browser - Back-End API 과정으로 request & response 가 이뤄지기에 NextJS Server 에서 Browser 에서 이뤄지는 Request 를 알 수가 없다.

그럼 어떻게 해야 했을까

현 프로젝트는 어쩔 수 없이 노가다로 각각의 API 를 Calling 하기 전에 header 에 custom key/value pair 를 넣어줘야하지만 만약 Client Side 에서 next 의 API Routing 으로 request 하고 API Routing 쪽에서 API Request 를 했다면 Server Side 이기에 middleware 쪽에서 Request 를 catch 할 수 있었을 것이다 그럼 저기에서 header 를 조작하는 로직을 넣을 수 있지 않았을까? 싶다.

그럴려면 api routing 쪽에 dynamic routing 으로 모든 api 가 Next JS Server 를 바라보게 하고 API Routing 에서 Request 를 날리게끔 한다면 middleware 를 탈 것이고 그렇게만 된다면 노가다를 안해도 될지도..