概览Speculation Rules 允许浏览器在用户导航前进行预渲染与预取。结合 Next.js 15 的 App Router，可在 `layout` 中注入规则，针对高频路由与关键页面显著降低交互延迟。在 layout 中注入规则export default function RootLayout({ children }: { children: React.ReactNode }) { const rules = { prerender: [ { source: 'list', where: { href_matches: '/(posts|products)/.*' } }, ], prefetch: [ { source: 'document', where: { href_matches: '/.*' } }, ], } return ( <html> <head> <script type="speculationrules" dangerouslySetInnerHTML={{ __html: JSON.stringify(rules) }} /> </head> <body>{children}</body> </html> ) } 治理策略对登录态与敏感页面禁用 prerender，避免会话泄露或副作用。为列表页与详情页启用 `prerender`，为其他次要页面使用 `prefetch`。与路由权限控制协作，避免在未授权场景预计算失败造成抖动。验证与指标浏览器：Chrome 125+、Edge 125+（Safari/Firefox 不支持时仅回退为正常导航）Next.js：15.0+；Node.js：20.x导航性能：跨路由 TTI 降低 30–50%；首屏 FCP 稳定注意事项与 HTTP 缓存、优先级提示（`fetchpriority`）配合以达到更优资源调度。对动态路由谨慎匹配，避免错误的预渲染命中导致资源浪费。
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复