Next.js 15 정식 버전 릴리즈
(nextjs.org)Next.js 15 정식 버전이 2024 컨퍼런스에 맞추어 릴리즈 되었습니다. 아래는 이전 Next.js 15 RC 2 에서 설명한 변경 사항이 포함 되어 있지 않습니다. 변경 사항들을 알고 싶으면 먼저 읽어보세요.
-
Caching Semantics (Breaking): 다음 동작에 대해서 더 이상 캐쉬 작업이 기본이 아닙니다. 변경 이유는
Partial Prerendering(PPR)나 서드파티 라이브러리와 상호작용할 때 문제가 발생할 수 있어, 기본 캐시 방식을 재검토했습니다. 이전에는 force-cache가 기본값이었지만, 이제는 no-store로 변경해 기본적으로 캐시되지 않도록 하여 더 예측 가능한 성능과 데이터를 제공합니다.- fetch 요청은 이제 기본적으로 캐시되지 않으며, no-store가 기본값입니다. 필요한 경우 force-cache 옵션으로 캐싱을 설정할 수 있습니다.
- GET Route Handlers 역시 기본적으로 캐시되지 않습니다. force-static 옵션을 통해 캐싱을 사용할 수 있습니다.
- Client Router Cache는 페이지 이동 시 최신 데이터를 반영하며 기본적으로 캐시되지 않습니다. 이전 동작으로 되돌리려면 staleTimes 옵션을 설정할 수 있습니다.
-
React 19 Support: Next.js 15은 React 19에 맞춰 업데이트되었으며, React 18과도 Pages Router에서 호환성을 유지합니다. App Router는 React 19 RC를 사용하며, 커뮤니티 피드백을 반영해 React 18을 사용하는 프로젝트도 React 19로 업그레이드할 수 있도록 했습니다. 또한 React Compiler가 도입되어 자동 최적화가 가능하며, 수동 메모이제이션을 줄입니다. 이러한 변경은 향후 React 19 정식 릴리즈에 대비한 것입니다.
- React Compiler (Experimental): React Compiler는 Meta의 React 팀이 만든 실험적인 컴파일러로, JavaScript의 의미와 React 규칙을 이해하여 코드를 자동으로 최적화합니다. 이를 통해 개발자가 useMemo 및 useCallback 같은 API를 통해 수동으로 메모이제이션 할 필요를 줄여줍니다. Next.js 15에서 지원되며 현재 Babel 플러그인으로만 제공되며, 빌드 시간이 느려질 수 있습니다.
- Hydration Error Improvements: Next.js 15은 이전 버전에서 향상된 에러 메시지와 하이드레이션 오류 처리 방식을 더욱 발전시켰습니다. 이제 하이드레이션 오류가 발생하면, 오류의 소스 코드와 문제 해결 방법에 대한 제안을 함께 보여줍니다. 이는 개발자가 오류를 쉽게 이해하고 수정할 수 있도록 도와줍니다.
-
Turbopack Dev: Turbopack 은 이제 안정화 되었고 빠른 속도는 여러분의 개발 경험을 향상 시켜줍니다. 로컬 서버 시작은 약 76%, Fast Refresh 는 96%, 캐쉬 없는 첫라우트 컴파일은 약 45% 향상 되었습니다.
-
unstable_after API (Experimental): unstable_after는 Next.js 15에서 도입된 실험적 API로, 사용자 응답 후에 로깅이나 분석과 같은 부차적인 작업을 처리할 수 있게 해줍니다. 서버리스 함수는 응답이 완료되면 즉시 실행을 멈추기 때문에, 이를 해결하기 위해 after()를 사용하여 응답이 완료된 후에도 작업을 지연하여 실행할 수 있습니다. 로딩, 통계 데이터등을 외부 시스템과 동기화 할 수 있습니다.
쉽지 않을 겁니다. React SPA 개발자들 뿔났던 <Suspense> 사건이 있거든요.
이슈: https://github.com/facebook/react/issues/29898
상황: https://x.com/sophiebits/status/1801663976973209620