[TIL] Next.js - Middleware, Matcher, Edge Runtime

오늘 공부한것 & 기억하고 싶은 내용

Middleware

• 말 그대로 중간에서 동작하는 일종의 소트프웨어를 뜻한다. 어떤 것과 다른것 사이에서 실행되는 코드.
• 미들웨어를 사용하면 request가 완료되기 전에 코드를 실행할 수 있다.
• 이미지, CSS, JS, Favicon 요청 등 웹 사이트의 모든 단일 request 하나하나 마다 미들웨어가 실행

예를들어 user가 profile 페이지로 이동하면 그 request는 profile 페이지로 가고 user에게 profile 페이지를 줘야한다.
그러다 미들웨어를 활성화하면 그 사이에서 실행될 어떤 코드를 갖게 된다. 따라서 profile 페이지로 이동하기 전에 임의의 코드를 실행할 수 있다.

미들웨어 사용 케이스

1. 인증 및 권한 부여: 특정 페이지나 API 라우트에 대한 액세스 권한을 부여하기 전에 사용자 신원을 확인하고 세션 쿠키를 확인할 때 사용할 수 있다.
2. 서버 사이드 리디렉션: 특정 조건(예: local, 사용자 조건)에 따라 서버에서 사용자를 리디렉션함.
3. 경로 Rewriting: request 속성을 기반으로 API 라우트 또는 페이지에 대한 라우트를 동적으로 재작성하여 A/B 테스트, 기능 출시 또는 레거시 경로를 지원한다.
4. 봇 탐지: 봇 트래픽을 탐지하고 차단하여 리소스를 보호한다.
5. 로깅 및 분석
6. 기능 플래그 지정

Response

Fetch API의 Response 인터페이스는 request에 대한 response를 나타낸다.

Matcher

• matcher를 사용하면 matcher에 지정한 특정 경로들에서만 미들웨어가 실행되도록 할 수 있다.

matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"]

Runtimes

Next.js에는 애플리케이션에서 사용할 수 있는 두 가지 서버 런타임이 있다.
1. Node.js 런타임(기본값): 생태계의 모든 Node.js API 및 호환 패키지에 액세스
2. Edge 런타임: 제한된 API를 지원하는 Edge 런타임

Edge Runtime

• Edge Runtime는 일종의 제한된 버전의 node.js로 생각하면 된다.
• 미들웨어는 현재 Edge Runtime과 호환되는 API만 지원함

배운점 & 느낀점

페이지 이동 전에 보여져야 할 것과 안 보여져야 할 것을 미리 구분할 수 있다는 점이 정말 편리하게 느껴졌다. 단순히 "중간에 끼어드는 코드"라는 개념을 넘어서, 보안, 최적화, 유저 경험 같은 다양한 측면에서 큰 역할을 할 수 있다는 점이 인상 깊었다.

실제로 사용하면 정말 유용할 것 같지만... 솔직히 아직은 조금 많이 어렵다...😅 그래도 배우면서 "언젠가 이걸 자유자재로 다룰 수 있다면 정말 멋질 것 같다!"라는 생각이 들었다.