MakeAI블로그프로젝트 문의
← Blog

웹· 읽는 데 2분

Next.js 16과 React Compiler 1.0: 웹 프로젝트에서 달라지는 것

10월에 Next.js 16과 React Compiler 1.0이 나왔습니다. 운영 중인 웹 서비스가 있다면 무엇을 확인하고 언제 올리면 좋을지 정리했습니다.

10월에 웹 개발 쪽에서 큰 릴리스가 두 개 있었습니다. 10월 7일 React Compiler 1.0, 10월 21일 Next.js 16입니다. 둘 다 "더 빠르게"가 핵심이지만, 운영 중인 서비스 입장에서는 확인할 것이 조금 다릅니다.

Next.js 16에서 바뀐 것

  • Turbopack이 기본 번들러가 됐습니다. 개발 서버와 프로덕션 빌드 모두에 적용됩니다.
  • 캐시 방식이 명시적으로 바뀌었습니다. use cache 지시어로 무엇을 캐시할지 직접 표시하는 Cache Components가 들어왔습니다.
  • middleware.ts가 proxy.ts로 바뀌었습니다.
  • React 19.2를 지원합니다.

React Compiler 1.0

컴포넌트를 분석해서 불필요한 다시 그리기를 자동으로 줄여 줍니다. 그동안 개발자가 useMemo, useCallback을 손으로 넣어 하던 최적화를 빌드 단계에서 대신합니다. 첫 안정 버전이며, React 팀은 프로덕션에서 쓸 수 있다고 밝혔습니다.

운영 중인 서비스라면

새 버전이 나왔다고 바로 올릴 필요는 없습니다. 다음 순서를 권합니다.

  1. 지금 버전이 지원 기간 안인지 확인합니다. 보안 패치가 끊긴 버전을 쓰고 있다면 그쪽이 더 급합니다.
  2. 캐시 동작에 기대는 부분을 찾습니다. 캐시 모델이 바뀐 만큼, 목록 페이지나 가격 정보처럼 "언제 갱신되는가"가 중요한 화면을 먼저 점검합니다.
  3. 미들웨어를 쓰는지 확인합니다. 인증이나 리다이렉트를 미들웨어에서 처리하고 있다면 파일명 변경과 함께 동작을 다시 검증해야 합니다.
  4. 스테이징에서 빌드 시간을 재 봅니다. 빌드가 빨라지면 배포 주기를 줄일 수 있습니다. 이득이 실제로 얼마나 되는지는 프로젝트마다 다릅니다.

새로 시작하는 프로젝트라면

특별한 이유가 없다면 16으로 시작하는 편이 낫습니다. 캐시를 명시적으로 다루는 방식은 처음에 조금 번거롭지만, "왜 이 화면이 갱신이 안 되지?" 같은 문제를 줄여 줍니다.


참고 자료