Next.js 16.4 버전에서는 사용자 경험을 개선하기 위해 'Partial Prefetching' 기능이 강화되었습니다. 이 업데이트는 Vercel의 AI 앱 빌더인 v0에서 페이지 탐색 시 로딩 상태를 줄이고, 더 빠른 콘텐츠 접근을 가능하게 합니다. 특히, 사용자가 이전에 열었던 페이지로 돌아갈 때 로딩 스켈레톤을 제거하고, 필요한 콘텐츠를 미리 가져오는 방식으로 작동합니다. 이러한 변화는 사용자에게 더 매끄러운 탐색 경험을 제공하며, 프론트엔드 개발자들에게는 성능 최적화의 새로운 기회를 제시합니다.
이전 버전의 Next.js에서는 prefetch={true} 속성을 사용하여 전체 페이지를 미리 가져오는 방식이었습니다. 이로 인해 사용자가 클릭하기 전에 로딩이 완료되지 않으면 느린 탐색 속도를 경험할 수 있었습니다. 그러나 Partial Prefetching을 통해 이제는 재사용 가능한 경로의 일부만 미리 가져와 클릭 전에 준비할 수 있습니다. 이렇게 하면 사용자 경험이 개선되고, 불필요한 요청을 줄일 수 있습니다.
Next.js 16.4에서는 next-partial-prefetching-optimizer라는 새로운 스킬이 도입되어, 개발자가 UI를 최적화하는 과정을 자동화할 수 있습니다. 이 스킬은 특정 UI 요소가 클릭 전에 준비되도록 하여, 사용자가 페이지를 탐색할 때 더 많은 콘텐츠를 즉시 볼 수 있도록 합니다. 예를 들어, /templates 페이지에서 특정 템플릿을 클릭할 때, 템플릿의 제목과 미리보기가 즉시 표시되도록 설정할 수 있습니다.
업데이트 후, 개발자들은 각 PR(풀 리퀘스트)마다 성능 지표를 검토하고 조정하여 전체 앱의 비용을 2.9% 줄이는 성과를 거두었습니다. 또한, instant() 테스트를 통해 UI의 즉시성을 검증할 수 있어, 향후 코드 변경 시 발생할 수 있는 문제를 사전에 방지할 수 있습니다. 이러한 테스트는 CI(지속적 통합) 환경에서도 실행되어, 코드의 안정성을 높이는 데 기여합니다.
개발자들은 next-partial-prefetching-optimizer 스킬을 통해 자신의 앱에서도 이러한 최적화를 적용할 수 있습니다. 이 스킬은 Cache Components와 Partial Prefetching을 사용하는 앱에서 자동으로 작동하며, 사용자는 탐색 개선을 위한 특정 요구 사항을 스킬에 전달할 수 있습니다. 이를 통해 더 나은 사용자 경험을 제공하는 동시에, 성능을 최적화할 수 있는 기회를 얻을 수 있습니다.