NextJS预摘

next.js 预取优化：三层策略避免中间件带来的性能问题

本文由Next.js赞助，但并非以传统方式。在解决中间件功能和快速回滚的数小时后，我发现了Next.js预取机制的几个关键点。

我想先说明一个陷阱：此问题仅在生产环境的Next.js v14及以上版本中，使用页面路由器且启用链接预取功能时才会出现。

以上图表展示了性能提升，无需赘述。

第一层：链接预取优化

这是最基本的预取优化方法。next/link组件的prefetch属性可以控制预取行为。我们可以创建一个自定义链接组件来简化操作：

import Link from 'next/link';

export const CustomLink = ({ prefetch = false, ...props }) => (
  <Link prefetch={prefetch} {...props} />
);

需要注意的是，在页面路由中，Next.js v15默认启用路由预取，即使将prefetch设置为false，悬停预取行为仍然存在。 对于应用程序路由，默认值为null。 请参考官方文档获取最新信息。 对于外部链接，可以使用原生标签禁用预取。

第二层：中间件预取请求过滤

我们可以通过配置中间件来减少服务器端的预取请求。利用中间件的匹配功能，我们可以排除带有“prefetch”标头的请求：

{
  source: '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
  missing: [{ type: "header", key: "purpose", value: "prefetch" }],
}

这段代码会匹配所有非API、静态资源、图片、favicon等路径的请求，并要求请求中不包含“purpose: prefetch”标头。 这可以有效减少预取请求，但无法阻止悬停预取。

第三层：实验性中间件prefetch标志

Next.js中间件提供了strict和flexible两种预取模式。默认情况下为flexible，即总是预取。strict模式仅在href显式匹配静态生成路由时进行预取。 如果使用getInitialProps，预取将被完全禁用。 如果你的静态站点数量有限，无需配置此选项即可减少服务器负载。

性能问题根源

使用中间件时，所有请求（包括图片、预取和页面请求）都会执行额外的中间件操作，从而增加服务器负载，影响性能。而未使用中间件时，预取行为则正常。这表明中间件与预取功能存在直接关联，并由此产生额外负载。

总结

本文介绍了三种避免Next.js中间件导致预取性能问题的策略。第二层策略通常已足够，但了解如何完全禁用预取（第三层）也很重要。 第三层策略可以作为补充，进一步优化性能。 请注意，所有信息均基于当前Next.js版本，建议参考官方文档获取最新信息。

以上就是NextJS预摘的详细内容，更多请关注php中文网其它相关文章！