Next.js 15 Service Worker Navigation Preload 与 App Router 协同实践：TTFB-API 预取

概览Navigation Preload 能在浏览器触发导航时并行拉取资源，避免 SW 接管带来的额外延迟。结合 App Router 的数据接口，可以在进入页面前就获取关键数据，降低 TTFB。注册与启用'use client' if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(async (reg) => { if (reg.navigationPreload) { await reg.navigationPreload.enable() } }) } sw.jsself.addEventListener('fetch', (event) => { const url = new URL(event.request.url) if (event.request.mode === 'navigate') { event.respondWith((async () => { const preload = await event.preloadResponse if (preload) return preload return fetch(event.request) })()) } }) App Router 接口app/api/post/route.tsexport async function GET() { const data = await fetch('https://api.example.com/post').then((r) => r.json()) return Response.json({ data }) } 页面协同export default async function Page() { const data = await fetch('/api/post', { cache: 'no-store' }).then((r) => r.json()) return <pre>{JSON.stringify(data, null, 2)}</pre> } 治理要点仅对导航与关键 API 使用预取，避免带宽浪费。SW 逻辑保持最小化，避免复杂缓存策略导致维护困难。与优先级提示、预加载协同，构建稳定首屏路径。验证与指标浏览器：Chrome 120+、Edge 120+（Safari/Firefox 支持有限时退化为正常导航）Next.js：15.0+；Node.js：20.xTTFB 与页面切换延迟明显降低，弱网下体验稳定