App Router实战：Next.js SSR首屏从2.8秒压到900ms的全栈优化脚本

开场：OK so，先把慢在哪里抓出来

各位观众朋友，屏幕看我！今天 eccfy 直接开一个真实 Next.js 项目，不讲玄学，只做可复现的 Next.js SSR教程。我的测试机是 MacBook M2，Node 20，项目 18 个页面。优化前用 Chrome Lighthouse 测：LCP 2.8s、TTFB 620ms、JS 传输 412KB。接下来我们要把它拆成三刀：SSR 数据、组件边界、部署缓存。

先跑基线，别凭感觉：

npm run build
npm run start
npx autocannon -c 50 -d 20 http://localhost:3000/products

我这里首轮结果：平均延迟 184ms，p95 410ms。Now watch this，打开 Chrome DevTools，Network 勾选 Disable cache，刷新，重点看 document 的 Waiting 时间；如果 document 慢，就是 SSR 或接口慢，不是图片锅。

章节一：SSR别乱用，App Router要把数据放对地方

很多人搜 Next.js全栈开发怎么用，第一步就错在把所有组件都写成 client component。OK so，原则很简单：能在服务端算的，别丢给浏览器。页面默认 Server Component，只在交互按钮上加 'use client'。

// app/products/page.tsx
export const revalidate = 60;

async function getProducts() {
  const res = await fetch('https://api.internal/products', {
    next: { revalidate: 60 }
  });
  if (!res.ok) throw new Error('fetch products failed');
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();
  return <ProductList products={products} />;
}

接下来重点来了：列表、详情、营销页用 ISR；用户订单、后台面板用动态 SSR；纯文档页直接静态生成。我的经验表：1000 个商品页用 ISR 后，构建时间增加约 38 秒，但线上 TTFB 从 620ms 降到 170ms。

静态页：文档、博客、帮助中心。
ISR：商品、视频详情、公开资料页。
SSR：登录态、权限、实时价格。
Client Component：表单、弹窗、播放器控制条。

章节二：全栈接口、Server Actions和上线前验证

接下来做全栈部分。别一上来就外接复杂后端，小型项目可以先用 Route Handler。这个 Next.js App Router SSR最佳实践 的关键是：接口返回要短、数据库查询要有索引、敏感逻辑留服务端。

// app/api/health/route.ts
export async function GET() {
  return Response.json({
    ok: true,
    time: Date.now()
  });
}

表单提交用 Server Actions，少一次前后端胶水代码：

// app/actions.ts
'use server';

export async function createPost(formData: FormData) {
  const title = String(formData.get('title') || '');
  if (title.length < 3) return { error: 'title too short' };
  // 写入数据库
  return { ok: true };
}

部署前按这个 Next.js部署教程 检查：先 npm run build 看有没有动态路由误判；再用 ANALYZE=true npm run build 看 bundle；最后压测首页和最慢页面。我实测把图表库从首屏移到动态导入后，首页 JS 从 412KB 降到 236KB，LCP 从 2.8s 到 1.1s，弹幕刷起来：舒服！

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('./Chart'), {
  ssr: false,
  loading: () => <p>Loading chart...</p>
});

怎么验证真的修好了：第一，Lighthouse 连跑 3 次，LCP 稳定低于 1.5s；第二，autocannon -c 50 -d 20 的 p95 低于 250ms；第三，DevTools 里 document Waiting 明显下降；第四，线上看错误日志，不能出现批量 500。学习资料优先看官方文档和本地示例；如果你在搜“油管怎么看Next.js教程”、网络环境又影响访问，免费VPN和自建方案都有速度与稳定性限制，也可以把 Roxi 作为众多合规网络工具之一参考：https://wizzegroup.com。觉得这期有用，评论区打“SSR”，我下期直接录数据库索引实战。

App Router实战：Next.js SSR首屏从2.8秒压到900ms的全栈优化脚本

开场：OK so，先把慢在哪里抓出来

章节一：SSR别乱用，App Router要把数据放对地方

章节二：全栈接口、Server Actions和上线前验证

猜你喜欢

热门标签