Next.js 16.4 버전이 발표되었습니다. 이번 업데이트는 새로운 프로그래밍 모델인 Cache Components를 도입하여, 앱 라우터의 성능과 사용자 경험을 개선합니다. Cache Components는 초기 로딩 속도를 빠르게 하고, 서버 렌더링된 앱에서 즉각적인 클라이언트 내비게이션을 가능하게 하며, 캐싱을 선언적이고 조합 가능하게 만들어줍니다. 이 모델은 Next.js 17에서 기본값으로 설정될 예정입니다.
이 새로운 기능은 모든 새로운 앱에서 기본적으로 활성화되며, 기존 앱을 위한 마이그레이션 도구도 제공됩니다. 이를 통해 개발자들은 기존 코드베이스를 새로운 모델로 쉽게 전환할 수 있습니다. 또한, Next.js 16.4는 메모리 사용량 감소, 컴파일 시간 단축, 더 작은 프로덕션 번들 등 여러 가지 성능 향상도 포함하고 있습니다.
Cache Components는 컴포넌트 트리의 특정 부분을 캐싱할 수 있도록 해주는 기능입니다. 개발자는 'use cache'라는 지시어를 사용하여 캐싱할 컴포넌트를 지정할 수 있습니다. 이 지시어는 Cache-Control HTTP 헤더의 컴포넌트 수준 버전으로 생각할 수 있습니다. 예를 들어, 특정 사용자 정보를 가져오는 컴포넌트를 캐싱하여, 페이지가 클라이언트에서 렌더링될 때 해당 정보를 재사용할 수 있습니다.
이 새로운 모델은 이전의 앱 라우터 버전에서의 암묵적인 캐싱 동작을 대체합니다. 개발자는 클라이언트 측 캐싱과 서버 측 캐싱을 조합하여 사용할 수 있으며, 이를 통해 더 복잡한 UI를 구축하면서도 성능을 유지할 수 있습니다.
Next.js 16.4에서는 ensureStatic이라는 기능이 추가되어, 특정 경로의 정적 콘텐츠를 보장할 수 있습니다. 이를 통해 동적 컴포넌트가 포함된 페이지가 의도치 않게 성능 저하를 일으키는 것을 방지할 수 있습니다. 예를 들어, 블로그 포스트 페이지에서 동적 사용자 아바타를 추가하고 싶지 않을 경우, ensureStatic을 설정하여 해당 페이지가 항상 정적으로 렌더링되도록 할 수 있습니다.
새로운 내비게이션 API를 통해 개발자는 prefetching 시 캐시된 콘텐츠를 제외할 수 있습니다. 이는 사용자가 실제로 내비게이션을 할 때까지 특정 데이터를 로드하지 않도록 하여 서버에 대한 부담을 줄이는 데 도움을 줍니다. 예를 들어, 이메일 앱에서 메시지 스레드를 미리 로드하지 않고, 사용자가 실제로 메시지를 클릭할 때만 로드하도록 설정할 수 있습니다.
Next.js 16.4는 에이전트 도구를 통해 앱의 보안과 최신 상태 유지를 지원합니다. 새로운 --agent 옵션을 사용하면, 에이전트가 앱을 최신 버전으로 업그레이드하는 데 필요한 가이드를 제공받을 수 있습니다. 또한, 에이전트 피드백 기능을 통해 개발 과정에서 발생하는 문제를 Next.js 팀에 보고할 수 있는 기능도 추가되었습니다.
이러한 변화들은 Next.js 사용자들에게 더 나은 개발 경험을 제공하고, 성능을 극대화하는 데 기여할 것입니다.