아카이브사이트맵
© 2026 Rayon. All rights reserved.
DevDay
아티클랭킹스페이스채용
Next.js faviconNext.js

Next.js 12.2, 엣지 런타임으로 성능 UP!

by DD
2022-06-28
4년 전
조회수 8

Middleware 기능 안정화 및 API 개선, 요청 처리 전 코드 실행 지원

On-Demand ISR 도입으로 배포 없이 콘텐츠 업데이트 가능

Edge API Routes 및 Edge SSR 지원을 통해 엣지 환경 렌더링 성능 향상

미들웨어(Middleware)의 동작 원리

미들웨어는 요청 처리 전 실행되는 코드로, 요청 헤더 수정, 리다이렉션, 쿠키 설정 등을 수행한다. 구체적으로 `middleware.ts` 파일에서 `NextRequest`와 `NextResponse` 객체를 사용하여 요청을 가로챈다. 따라서 인증/인가 처리나 A/B 테스트 구현에 유용하다.

On-Demand ISR과 기존 ISR의 차이점

On-Demand ISR은 배포 없이 콘텐츠를 즉시 업데이트하는 기능이다. 기존 ISR은 빌드 시점에 정적 페이지를 생성하고, 일정 시간 간격으로 재 생성하는 방식이다. 반면 On-Demand ISR은 CMS 연동 시 데이터 변경을 감지하여 즉시 페이지를 갱신하므로, 데이터 일관성을 유지한다.

Edge 런타임의 장점과 고려 사항

Edge 런타임은 Node.js보다 가볍고 빠른 시작 시간을 제공하여 레이턴시 감소에 기여한다. 구체적으로 Edge API Routes와 Edge SSR을 지원하여 엣지 환경에서 렌더링을 수행한다. 하지만 Node.js API 미지원으로 인해, 기존 코드를 수정해야 하는 경우가 발생할 수 있다.

Next.js 12.2
중급
출시
Next.js
React
SWC
JavaScript
Frontend
원문 읽기
원문 읽기

댓글 0

첫 번째 댓글을 남겨보세요!

관련 추천 글

Next.js 12.1, 온디맨드 ISR & SWC 컴파일러로 성능 UP!

Next.js 로고

Claude Code가 뽑은 최고의 기술 스택!

테오 로고

AI 코딩, 이제 하네스 시대: OpenCode와 OMO로 개발 생산성 UP!

요즘IT 로고

AI 코딩, 이제 하네스 경쟁 시대! OpenCode와 OMO로 생산성 UP

벨로그 로고

프론트엔드 디버깅, 이제 시간 낭비 끝!

데브투 로고

20년간의 기술 변화: 개발자는 무엇을 배워야 할까?

요즘IT 로고
Next.js faviconNext.js
중급
출시
Next.js
React
SWC
JavaScript
Frontend

관련 추천 글

Next.js 12.1, 온디맨드 ISR & SWC 컴파일러로 성능 UP!

Next.js 로고

Claude Code가 뽑은 최고의 기술 스택!

테오 로고

AI 코딩, 이제 하네스 시대: OpenCode와 OMO로 개발 생산성 UP!

요즘IT 로고