부분 프리페칭으로 미리 준비할 화면을 정하고, 클릭 전 콘텐츠가 준비됐는지 테스트하며 v0의 탐색 화면을 개선했다.
v0에서 템플릿을 열면 상세 내용 대신 로딩 화면이 먼저 나타났다. 같은 템플릿으로 돌아와도 데이터를 다시 가져오며 기다려야 했다. Next.js 팀은 클릭 전에 준비할 콘텐츠를 테스트로 지정하고, 코딩 에이전트가 캐시와 미리 가져오기를 조정하도록 해 이 탐색 경험을 개선했다.
v0는 Vercel의 AI 앱 제작 도구다. 이번 작업은 기존에 개선했던 채팅 화면 바깥으로 적용 범위를 넓혔다. 목표는 페이지에 들어갈 때 필요한 내용을 미리 준비하고, 돌아왔을 때도 그 내용을 다시 쓸 수 있게 하는 것이었다.
이를 가능하게 하는 기능이 부분 프리페칭이다. 이동할 페이지에서 재사용할 수 있는 부분은 클릭 전에 가져오고, 나머지는 실제로 이동할 때 불러온다. 기존에 페이지 전체를 미리 가져오는 방식은 사용자가 열지 않을 동적 콘텐츠까지 요청할 수 있었다. 미리 가져오기를 끄면 클릭한 뒤에야 모든 작업이 시작됐다.
클릭 전에 보일 화면을 검증하는 방법
Next.js의 instant() Playwright 테스트 도우미는 클릭 이후 탐색 중에 도착하는 콘텐츠를 막아 둔다. 이 상태에서 원하는 화면이 보이는지 확인하면, 미리 준비된 콘텐츠만으로 탐색 목표를 충족하는지 검증할 수 있다. v0의 템플릿 테스트는 넓은 로딩 화면이 나타나지 않고 헤더·제목·미리보기가 보이는지 검사했다.
Next.js 16.4에 포함된 next-partial-prefetching-optimizer Skill은 에이전트가 이 검증을 반복하도록 안내한다. 먼저 현재 화면에서 통과하는 테스트를 만들고, 원하는 화면에 대한 검증을 추가해 실패를 확인한다. 이어 캐시와 프리페칭을 수정하고 다시 빌드해 테스트를 실행한다. 통과한 테스트는 코드에 남겨 CI에서 이후의 회귀를 잡는다.
템플릿 상세 화면에서는 공개 템플릿 데이터와 사용자별 상태를 분리했다. 여러 사용자에게 공유해도 되는 공개 데이터에는 use cache: remote를 적용했다. Vercel에서는 이 결과가 Runtime Cache에 저장된다.
팀은 작업을 기능별 PR로 나누고, 병합 전에 미리보기 환경에서 직접 탐색을 확인했다. 배포 뒤에는 캐시 읽기·쓰기 비용, 프리페칭과 함수 호출을 포함한 요청량, 해당 경로를 처리하는 CPU 사용량, 프리페칭의 데이터 전송량을 추적했다.