Improving navigation experience in v0 with Next.js 16.4

import
type
{ NextConfig }
from
'next'
;
const
nextConfig
:
NextConfig
=
{
cacheComponents
:
true
,
partialPrefetching
:
true
,
};
export
default
nextConfig;

export
const
prefetch
=
'partial'
;

import
{ instant }
from
'@next/playwright'
;
import
{ expect
,
test }
from
'@playwright/test'
;
test
(
'prefetches the primary template UI'
,
async
({ page })
=>
{
await
page
.goto
(
'/templates'
);
const
card
=
page
.getByTestId
(
'template-card-link'
)
.first
();
await
instant
(page
,
async
()
=>
{
await
card
.click
();
await
page
.waitForURL
(
'**/templates/*'
);
await
expect
(
page
.getByTestId
(
'template-detail-skeleton'
))
.toHaveCount
(
0
);
await
expect
(
page
.getByTestId
(
'template-detail-header'
))
.toBeVisible
();
await
expect
(
page
.getByTestId
(
'template-detail-title'
))
.toBeVisible
();
await
expect
(
page
.getByTestId
(
'template-detail-preview'
))
.toBeVisible
();
});
});

选择导航和目标UI
│
▼
为当前UI编写通过的 instant() 测试
│
▼
添加目标断言并确认它们失败
│
▼
重构应用 ◀────────────────────────────┐
使用缓存和预取                 │
│                                  │
▼                                  │
重新构建并重新运行测试                    │
│                                  │
├── 仍失败 ─────────────────┘
│
▼ 通过
验证回归检查并保留测试

当我从“模板”页面打开一个模板时，预取其标题、标题和预览，以便立即显示。

import
{ cacheLife
,
cacheTag }
from
'next/cache'
;
async
function
loadCachedPublicTemplatePageData
(templateId
:
string
) {
'use cache: remote'
;
cacheTag
(
`template:
${
templateId
}
`
);
cacheLife
(
'hours'
);
return
loadPublicTemplatePageData
(templateId);
}

import
Link
from
'next/link'
;
<
Link
href
=
{
`/templates/
${
template
.id
}
`
}
prefetch
=
{
true
}>
<
TemplateCard
template
=
{template} />
</
Link
>;

在“Templates”页面上，请等到我悬停、聚焦或触摸卡片后再预取其详细信息。不要在卡片刚出现时就预取所有卡片。

const
[
intent
,
setIntent
]
=
useState
(
false
);
<
Link
href
=
{href}
prefetch
=
{intent
?
true
:
'auto'
}
onMouseEnter
=
{()
=>
setIntent
(
true
)}
onFocus
=
{()
=>
setIntent
(
true
)}
onTouchStart
=
{()
=>
setIntent
(
true
)}
/>;

<
PrefetchLink
href
=
{
`/templates/
${
template
.id
}
`
}
prefetch
=
"intent"
>
<
TemplateCard
template
=
{template} />
</
PrefetchLink
>

当我在“设置”页面之间切换时，我希望在点击“高级”、“工作区”和“使用情况”之前，这些页面的内容就已经预先加载。其他页面在打开时再加载，并且如果我返回这些页面，内容应保持可用。

import
{ cacheLife
,
cacheTag }
from
'next/cache'
;
async
function
AdvancedSettings
({ scope }
:
{ scope
:
string
}) {
'use cache: private'
;
cacheLife
({ stale
:
300
});
cacheTag
(
'settings:advanced'
);
return
<
AdvancedSettingsContent
scope
=
{scope} />;
}

import
{ navigation }
from
'next/cache'
;
async
function
Comments
() {
await
navigation
();
const
comments
=
await
getComments
();
return
<
CommentList
comments
=
{comments} />;
}

当我在“项目”页面打开一个项目时，我希望在点击时标题和“生产部署”已经准备就绪。在悬停、聚焦或触摸时预加载它们。“最近聊天”应为返回访问缓存，但不需要预加载。

import
{ Suspense }
from
'react'
;
import
{ navigation }
from
'next/cache'
;
function
ProjectPage
({ project }
:
{ project
:
Project
}) {
return
(
<>
<
ProjectDetails
project
=
{project} />
<
Suspense
fallback
=
{<
RecentChatsSkeleton
/>}>
<
RecentChats
projectId
=
{
project
.id} />
</
Suspense
>
</>
);
}
async
function
RecentChats
({ projectId }
:
{ projectId
:
string
}) {
await
navigation
();
const
chats
=
await
loadProjectChats
(projectId);
return
<
ChatList
chats
=
{chats} />;
}

另一个使用 navigation() 的示例是 /settings/usage。该代理在预获取阶段保留了标签页、筛选器和 Activity 界面，而信用额度仪表板和使用量字段则在导航过程中加载，并在返回访问时保持可用。

重构后，整体加载状态已消失。项目标题和生产部署部分率先显示，随后是近期聊天记录，该部分会针对返回访问进行缓存：

重构后的项目界面。

## 复制链接到标题 查看结果

我们在每次 PR 后都审查了指标，并根据进展调整了工作。当所有 PR 合并后，全应用对比显示每日总成本降低了 2.9%，即使共享运行时缓存支出增长到了重构前水平的 4.3 倍，每天增加约 3.44 美元。更少的请求数量和更低的计算及传输成本抵消了这一增长，使我们追踪的请求服务成本下降了 14.4%。

在同期，流量和无关部署也发生了变化，因此我们将全应用数据视为确认重构没有使 v0 更加昂贵的依据，而非仅由本次工作带来的节省。

我们还将针对这些导航的 instant() 测试数量翻了一番。在我们修改的区域，用户在打开页面时能立即看到更多有用内容，返回时也遇到更少的加载状态。这些测试现在保护了 v0 演进过程中的体验。

## 复制链接到标题 亲自尝试

你可以使用 next-partial-prefetching-optimizer 技能在你的应用中运行相同的循环。它假设你的应用已经使用了缓存组件和部分预获取功能。缓存组件迁移指南和部分预获取采用指南涵盖了这些前提条件。

为你的编码代理安装技能：

安装完成后，大多数编码代理会在请求匹配时自动调用该技能。根据你的工具链，你也可以要求代理调用 next-partial-prefetching-optimizer 技能，或使用 /partial-prefetching-optimizer 命令。

用你自己的话描述想要优化的导航（如上文示例所示），或要求代理在你的应用中寻找优化机会。

若想自行应用这些模式，请遵循《优化预获取指南》。该技能在底层使用相同的指导原则。

## 复制链接到标题 反馈与社区

在你自己的应用中尝试该功能，并告诉我们效果如何：

- GitHub 讨论
- GitHub 问题
- Discord 社区