Next.js App Router 中的导航性能

03/23/2025 05:44:44 | China Standard Time

在现代 web 开发中，导航性能直接影响用户体验。Next.js 提供了多种工具和技术来提升应用的导航速度，尤其是在其 App Router 中。本文将为您介绍如何通过一些实用方法优化导航性能。

# App Router 对比 Page Router

当您比较 `Pages Router` 和 `App Router`的性能时，您会注意到默认情况下，`Pages Router` 导航更快，而 `App Router`的初始页面加载速度更快（尽管如果没有一些工具可以测量，很难注意到初始页面加载速度的差异）。发生这种情况主要是因为两件事。使用 `Pages Router`，导航到另一个页面所需的 `JavaScript` 已在页面初始加载时下载到浏览器。使用 `App Router`，下载到浏览器的 `javascript` 通常更小，并且动态内容通过相同的初始页面请求进行流式传输（而 `Pages Router` 将有 2 个单独的请求）。

![](https://corehome.oss-accelerate.aliyuncs.com/blogs/d59c8f60-2016-47a9-8d53-e370a20f27f3.jpg)

# 使用 Suspense

在动态内容加载时，可以使用 `React` 的 `Suspense` 组件搭配一个加载状态的 `fallback` 来显示骨架屏，以提升用户体验。以下是一个简单的代码示例：

```javascript
import { Suspense } from 'react';

function DynamicContent() {
	// 模拟动态加载的数据
	const data = fetchData(); // fetchData 是一个异步函数
	return <div>{data}</div>;
}

function MyComponent() {
	return (
		<Suspense fallback={<div>loading...</div>}>
			<DynamicContent />
		</Suspense>
	);
}

export default MyComponent;
```

> 当 `DynamicContent` 加载数据时，用户会看到 `loading...` 提示，而不是空白页面。这能让用户感知到导航正在进行。

# 速度呢？

Suspense 这是一种常见的方案，但在 App Router 时，`Layout` 通常是服务端渲染，整页导航的速度依旧很慢。所以我们需要其他方法来解决这个问题

# 客户端路由缓存

通过启用客户端路由器缓存，我们可以在用户第二次访问某个页面时获得快速导航。这是 Next.js 14 的默认行为，但在 Next.js 15 中发生了变化。现在，如果我们想启用此行为，则需要在文件中添加以下内容：

```javascript
const nextConfig: NextConfig = {
	experimental: {
		staleTimes: {
			dynamic: 30,
			static: 180,
		},
	},
};
```

> 设置后，用户在 30 秒内再次访问同一页面时，将直接使用缓存内容，无需重新请求。


# 启用部分预渲染（Partial Prerendering, PPR）

部分预渲染是 Next.js 的实验性功能，也许推出后就可以不用考虑导航性能了，`ppr` 可以预渲染页面的一部分，从而加快导航速度。要启用它，需要在配置文件中添加设置：

```javascript
// next.config.ts
module.exports = {
	experimental: {
		ppr: true,
	},
};
```

> 启用 `PPR` 后，Next.js 会优先渲染静态部分，动态内容则在需要时加载。这适用于需要快速显示初始内容的场景。

# 使用预加载（Prefetching）

Next.js 的 `Link` 组件支持预取功能，可以在用户点击前（鼠标悬浮时）提前加载页面内容。以下是一个示例：

```javascript
import Link from 'next/link';

function Navigation() {
	return (
		<div>
			<Link href="/dynamic-page" prefetch={true}>
				导航到动态页面
			</Link>
		</div>
	);
}

export default Navigation;
```

> 设置 `prefetch={true}` 后，Next.js 会在链接可见时预取整个页面内容（包括动态部分），实现接近即时的导航效果。

当然，这会增加不必要请求的数量，这可能会增加托管平台上的带宽使用量，也会给服务器带来一些不必要的负载。

# 使用边缘运行时（Edge Runtime）

通过指定 `runtime = 'edge'`，在边缘节点运行页面代码，例如通过 `next on pages` 或  `opennext` 在 `cloudflare`,`aws lambda` 等 `edge runtime` 上托管部分页面，减少加载时间。示例代码如下：

```javascript
// app/page.tsx
export const runtime = 'edge';

export default function Page() {
	return (
		<div>
			<h1>edge runtime</h1>
			<p>running on edge runtime</p>
		</div>
	);
}
```

> 需确保使用的库与 `edge runtime` 兼容。

# 总结

以上代码示例展示了如何通过 `Suspense`、部分预渲染、预加载、边缘运行时和客户端缓存等技术优化 Next.js 应用的导航性能。开发者可以根据项目需求选择合适的方法，或者组合使用这些技术，以打造更快、更流畅的用户体验。


你可以参考 https://github.com/ethanniser/NextFaster 了解更多的优化方法。