Next.js 15 Server-Timing 与性能测点治理实践

核心价值将后端关键阶段暴露为标准 `Server-Timing` 指标，前端与运维在同一视图观察端到端耗时。结合 RSC 渲染与客户端 `Performance` API，实现统一性能治理。Route Handler 标注export const runtime = 'edge' export async function GET() { const t0 = Date.now() const db = await fetch('https://api.example.com/db').then(r => r.json()) const t1 = Date.now() const calc = await new Promise((res) => setTimeout(res, 20)) const t2 = Date.now() const body = JSON.stringify({ ok: true }) return new Response(body, { headers: { 'Content-Type': 'application/json; charset=utf-8', 'Server-Timing': `db;dur=${t1 - t0},calc;dur=${t2 - t1}`, 'Cache-Control': 'no-store', }, }) } 客户端采集// 采集 Server-Timing 与导航指标 addEventListener('load', async () => { const entries = performance.getEntriesByType('navigation') const nav = entries[0] // 可结合 Resource Timing 与 responseStart/responseEnd 分析 navigator.sendBeacon('/api/rum', JSON.stringify({ ttfb: nav.responseStart, dom: nav.domContentLoadedEventEnd })) }) 治理建议指标名称简洁有意义，保持 dur 单位为毫秒；敏感阶段避免暴露过多细节。对关键路由统一使用 Server-Timing，便于浏览器网络面板与 RUM校验一致性。结论Server-Timing 让服务端阶段清晰可见。与浏览器性能采集协同，可形成闭环治理，提高定位与优化效率。