Making Navigations Instant in v0

在 v0 中实现即时导航 | Next.js

返回博客

2026年8月6日，星期四

在 v0 中实现即时导航

发布者

Jude Gao

@gao_jude

贡献者

2

成员

上个月我们分享了 Next.js 16.3 中一些新工具的预览，这些工具为使用 React Server Components 构建的应用程序带来了即时页面导航功能。

我们一直在 v0（Vercel 的全栈编码平台）中采用这些工具，并分享了这张图表，展示了生产环境中导航速度的提升：

v0 生产环境页面导航时间

令人印象深刻的是，这些结果来自于一个使用新技能编写失败测试、修复缓慢导航并验证每条路由的编码代理。

我们将探讨这些测试如何针对缓慢导航进行断言，以及这个技能的工作原理。

但首先，让我们看看 Next.js 16.3 是如何在不将任何数据获取或渲染代码移动到客户端的情况下，使像 v0 这样的应用感觉如此流畅的。

动态应用的预渲染

此前，Next.js 提供了两种主要工具来确保您的应用能够实现即时导航：

• 要么您可以在构建时静态预渲染页面（这对于包含个人数据的动态应用来说是不切实际的）

• 要么您可以将链接标记为完全预取（这可能会很昂贵并给您的服务器带来压力）

这使得像 v0 这样的动态、个性化应用缺乏实现即时导航的良好策略。

Next.js 16.3 通过允许您在用户浏览应用时预渲染动态内容，并将这些内容完全缓存在浏览器中，解决了这个问题。

现在，渲染动态、个性化 UI 的组件可以定义一个带有 Suspense 的加载状态，或者使用 'use cache' 将 UI 的部分标记为可预渲染。在这两种情况下，Next.js 都可以提取这些 UI 并在导航之前将其加载到客户端，而无需完全渲染目标页面或保持该 UI 静态。

这是 Next.js 首次为动态应用提供利用部分预渲染技术的方法。以下是参与 v0 开发的工程师对此的看法：

Slack

MS

Martin Sione

晚上8:32

是的，@jude.gao 领导这项工作，真的非常感谢。对于博客/案例研究，我认为有必要明确说明即时 != 部分预渲染，同时说明实现即时导航要容易得多。即使我自己在这里工作，也认为实现即时导航需要付出更大的努力，但实际上部分原因是我以为我们需要付出与静态部分预渲染相当的努力。

因此，动态应用可以在运行时部分预渲染页面。这就是它们能够实现即时导航，同时仍然向浏览器发送最小代码的方式。

现在你可能会认为，唯一验证导航是否即时的方法就是重构代码、运行应用，然后点击链接亲自查看。但 Next.js 16.3 最具创新性的特点之一是它自带了一个新原语，让你或代理知道你已经使某个路由变得即时。

得益于这个新原语，代理非常适合在现有应用中自主实现即时导航。

这正是我们让 v0 实现即时导航的方式。

使用循环使 v0 实现即时导航

为了将这些新功能带到 v0，我们使用了一个在循环中运行的代理。对于每个缓慢的导航，它会编写一个失败的测试，应用修复，重新运行测试，并在测试通过之前不断尝试。

为了让循环自行运行，它需要：

• 可验证的目标。一个失败的测试，一旦通过就会终止循环。

• 防护措施。一种经过验证的模式技能，使代码更接近目标。

• 真实反馈。生产环境指标，确认成功循环产生了预期效果。

定义目标，例如："使从 '/' 到 '/chats' 的导航瞬间完成"
│
▼
将其写成测试，并确认当前应用中该测试失败
│
▼
使用技能中的模式进行修复 ◀───┐
│                                  │
▼                                  │  仍然不够快
重新构建并运行测试               ────┘
│
▼  瞬间完成
将测试部署到 CI 以防止回归

这个循环中最困难的部分是为模糊的目标（如“确保此导航即时完成”）编写一个失败的测试。

幸运的是，Next.js 16.3 正好提供了我们需要的工具。

为“快速”编写的测试

Next.js 16.3 为 Playwright 引入了 instant() 测试辅助工具。

该工具允许你编写测试，暂停导航并断言哪些 UI 部分对用户是即时可见的，而无需任何网络请求：

e2e/navigation.spec.ts

import
{ expect
,
test }
from
'@playwright/test'
;
import
{ instant }
from
'@next/playwright'
;
test
(
'navigating to the chats page is instant'
,
async
({ page })
=>
{
await
page
.goto
(
'/'
);
await
instant
(page
,
async
()
=>
{
await
page
.getByRole
(
'link'
,
{ name
:
'Chats'
})
.click
();
await
expect
(
page
.getByTestId
(
'app-title'
))
.toBeVisible
();
});
});

如果预期内容被网络阻塞，测试将失败。

有了这个工具，我们就可以启动循环了。

在 v0 上运行循环

现在我们已经具备了修复 v0 中缓慢导航所需的一切。

我们的流程如下：

• 收集关键的缓慢用户旅程。我们知道 v0 中某些重要导航速度较慢（从主页点击“新建聊天”、在设置中导航、查看个人资料），因此我们专注于这些场景。Next.js 16.3 还新增了 Instant Insights 功能，可在开发过程中自动识别所有非即时路由。

• 编写失败的测试。代理使用 instant() 工具为每个导航编写了失败测试。凭借技能，代理会尽力捕捉哪些 UI 部分应该即时可见，但你也可以引导它包含特定部分，例如 v0 新聊天页面上的“Chats”标签。

• 重构直到所有测试通过。代理使用技能中的模式对我们的 Next.js 代码进行符合规范的修改，并持续工作直到每个测试通过。在某些情况下，这涉及影响多个功能的大规模重构，这正是使用循环的强大之处。

• 提交更改和测试。这些测试不仅帮助代理在循环中修复了问题路由；它们还确保未来的更改永远不会让这些导航变慢。因此，我们将它们保留在项目中，与其余测试套件一起在 CI 中运行。

但这些更改具体是什么样子的呢？

在许多情况下，解除缓慢导航的阻塞只需将某些动态数据访问移至 Suspense 边界下方，并允许页面其余内容包含在壳中。

以下是一个示例：

app/settings/workspace/page.tsx

- export default async function WorkspacePage() {
-   const session = await getServerSession();
-   const team = await fetchTeam(session);
+ export default function WorkspacePage() {
return (
<SettingsPageLayout>
<SettingsHeader title="Workspace" />
-       <TeamSettings team={team} />
+       <Suspense fallback={<WorkspaceSkeleton />}>
+         <WorkspaceContent />
+       </Suspense>
</SettingsPageLayout>
);
}
+ async function WorkspaceContent() {
+   const session = await getServerSession();
+   const team = await fetchTeam(session);
+   return <TeamSettings team={team} />;
+ }

在其他情况下，需要进行更大规模的重构，例如将阻塞型依赖从根布局中移出，并转移到实际使用它的组件中。

无论需要进行何种修改，代理都能够通过 Skill 中包含的模式，应用现代 Next.js 最佳实践。

快速，持久

最终，由于代理的工作，登录和未登录状态下的首页、聊天详情页以及设置下所有子页面的加载方式都从阻塞式变成了即时加载。

我们最终新增了 16 个测试用例，这些用例将这些改进结果纳入测试套件。这些测试能够防止代码库持续变更时出现回归问题，这在代理可能做出抵消这些优化的修改时尤为重要。

立即体验

你现在就可以开始在自己的 Next.js 应用中使用即时导航功能。

对于已有 Cache Components 的应用，如果存在需要优化的缓慢导航流程，next-cache-components-optimizer Skill 提供了所有必要的工具，可以复现我们在 v0 版本中执行的相同流程。

安装方法如下：

npx
skills
add
vercel/next.js
--skill
next-cache-components-optimizer

...然后向代理发送你想要优化的导航提示：

提示内容复制提示

使用 next-cache-components-optimizer 技能，将从 '/' 到 '/chats' 的导航变为即时加载。

对于尚未使用 Cache Components 的应用，next-cache-components-adoption 技能将引导你的代理完成现有应用的迁移过程。

要查看这两个技能的文档，请查阅我们关于如何在 Next.js 中使用 AI 代理的指南。

代理时代框架的重要性

任何使用过代理的开发者都深知确定性测试的重要性。你的测试套件越能准确描述你期望应用的行为，代理就越能有效地修改和重构代码。

但某些行为可能难以测试。每个人都能感受到一个经过打磨、响应迅速的应用与一个卡顿、无响应的应用之间的区别，但这种差异却很难用确定性的方式捕捉。

instant() 测试辅助工具是一个创新的示例，展示了如何将高质量应用中这些模糊的特性转化为确定性行为。由于它与框架深度集成，这个辅助工具能够验证通用测试工具永远无法触及的用户体验细节。

我们认为，像这样的验证工具是框架在代理时代最有价值的贡献之一，我们计划继续在 Next.js 中添加更多此类工具。

这也证明了即使代理编写了我们代码的大部分内容，框架仍然至关重要。代理可以编写任何代码，但框架的职责是约束这些代码，使其生成比独立运行时更优质的用户界面。

这就是我们通过 Next.js 所构建的未来。

反馈与社区

在您自己的应用上尝试一下，并告诉我们结果如何：

- GitHub Discussions

- GitHub Issues

- Discord Community