[Next.js] ERR_HTTP_HEADERS_SENT 응답 헤더 중복 에러

문제

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

 

 nextjs 14 app router 웹에서 발생한 에러이다. 랜딩 페이지 호출 시 매우 적은 확률로 발생한다. 요청할 때마다 터지는 것은 아니고, 정말 가끔 발생한다. 응답 헤더를 중복으로 설정하려할 때 발생하는 에러라고 하는데, 우선 랜딩 페이지에서는 어떤 api도 호출하고 있지 않고 있다. 그래서 페이지 요청 시 거치는 middleware.ts에서 문제가 생겼을거라 판단했고, 콘솔 로그로 미들웨어에 들어오는 요청을 찍어봤다. 

 

 

확인 결과, 페이지에 포함된 모든 정적 파일(.js, .png, .webp, .svg, .css 등)들이 미들웨어를 거쳐오는 것을 확인할 수 있었다.

 

솔루션

 항상 에러가 터지는 것도 아니니 middleware 구조에 문제가 있는 것은 아닌 것 같았고, 무수히 많은 정적파일들이 미들웨어를 거칠 때 매우 적은 확률로 로직이 꼬인게 아닌가.. 추측해봤다. 그래서 middleware의 matcher를 지정해서 미들웨어를 거치는 파일을 제한시킴으로써 문제를 해소할 수 있었다. 겸사겸사 정적파일들이 미들웨어를 거치지않게 함으로써 로딩 속도 개선 및 리소스 절약 효과도 가져갈 수 있을 것 같다.

 

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|image).*)'],
};

 

 사실 개선 이전과 이후를 수치로 비교하면서 어느 정도의 성능 개선이 이루어진건지 확인하고 싶은데, 아직 그런 성능 측정 시스템을 구축하지는 못 했다. 할 수 있으면 직접 구축해보고 싶네..