Why is my Next.js app slow on first load and how can I improve?

近年来，React 生态中的 Next.js 凭借其服务端渲染（SSR）、静态生成（SSG）以及开箱即用的优化能力，成为构建高性能 Web 应用的首选框架之一。然而，不少开发者在实际部署后却发现，自己的 Next.js 应用在首次加载时响应迟钝、白屏时间漫长。本文将深入剖析首屏加载缓慢的根源，并提供一套可落地的优化方案。

首屏之痛：问题出在哪里？

首屏加载速度直接影响用户体验与 SEO 表现。Next.js 虽然提供了 SSR 和 SSG 两种预渲染方式，但若配置不当，反而可能成为性能瓶颈。常见原因包括：

1. 服务端渲染（SSR）带来的额外延迟
当用户首次请求页面时，Next.js 会在服务端执行 getServerSideProps 获取数据并渲染 HTML。如果该函数中涉及复杂的数据库查询、第三方 API 调用或大量计算，服务端响应时间就会急剧增加。用户等待的不仅是网络传输，更是服务端的处理耗时。

2. JavaScript 包体积过大
默认情况下，Next.js 会将所有页面依赖的代码打包到一个或多个 chunk 中。如果引入了大型库（如图表库、富文本编辑器），且未进行代码分割，浏览器就需要下载并解析数百 KB 甚至数 MB 的 JS 文件，导致主线程阻塞，首屏渲染被延迟。

3. 未充分利用静态生成（SSG）与增量静态生成（ISR）
许多开发者习惯对所有页面使用 SSR，即使内容变化不频繁。SSR 每次请求都需要重新渲染，而 SSG 可将页面在构建时生成 HTML，直接由 CDN 缓存分发，速度极快。ISR 则允许在静态页面基础上定期更新，兼顾实时性与性能。

4. 瀑布式请求（Waterfall Requests）
在客户端组件中，如果多个 useEffect 或 getStaticProps 内的数据请求串行执行，或者依赖关系复杂，就会形成请求瀑布。浏览器必须等待上一个请求完成才能发起下一个，白白浪费并发能力。

5. 字体与图片加载策略不当
未优化的自定义字体、未使用 Next.js 内置的 next/image 组件进行懒加载与尺寸适配、大型背景图直接通过 CSS 加载，都会显著增加首次加载的资源体积。

如何破局？七步优化法

针对上述问题，我们将从架构、代码和配置三个层面给出具体改进策略。

第一步：合理选择渲染策略
- 对营销页面、博客文章等静态内容，坚决使用 getStaticProps 与 getStaticPaths，配合 ISR 实现定期更新。
- 仅对真正需要实时数据的页面（如用户仪表盘、社交 feed）使用 SSR，并考虑将数据缓存至 Redis 或内存，减少重复计算。
- 对于部分动态组件，可采用客户端渲染（CSR）与 SSR 混合的方式，使用 dynamic 组件配合 ssr: false 延迟加载非关键模块。

第二步：代码分割与 Tree Shaking
- 利用 Next.js 的动态导入（next/dynamic）将大型库拆分为独立 chunk，仅在需要时加载。
- 确保 package.json 中只导入必要的模块，避免使用 import * 等全量引入方式。
- 对于第三方库，优先选择支持 Tree Shaking 的版本（如 lodash-es 替代 lodash）。

第三步：优化数据获取
- 在 getServerSideProps 中并行发起所有独立请求，使用 Promise.all 避免串行等待。
- 考虑使用 SWR 或 React Query 在客户端缓存数据，减少重复请求。
- 对 API 响应启用 HTTP 缓存头（如 Cache-Control），让 CDN 或浏览器缓存中间结果。

第四步：压缩与预加载关键资源
- 启用 Next.js 的压缩插件（如 compression 中间件）或由反向代理（Nginx、Cloudflare）处理 Gzip/Brotli 压缩。
- 使用 next/head 中的 <link rel="preload"> 预加载关键字体、图片以及首屏需要的 CSS。
- 对于字体，使用 font-display: swap 确保文本在字体加载前可见，并使用 next/font 自动优化。

第五步：图片优化
- 全面迁移至 next/image 组件，它自动生成 WebP 格式、支持懒加载、设置合适的 sizes 属性。
- 在 next.config.js 中配置 images.formats 为 ['image/avif', 'image/webp']，进一步提升压缩效率。
- 对 hero 图等首屏大图，设置 priority 属性避免懒加载延迟。

第六步：构建产物体积监控
- 使用 @next/bundle-analyzer 分析每个页面的 JS bundle 构成，找出体积异常的依赖。
- 在 CI/CD 流程中集成 Lighthouse CI 或 WebPageTest，设定首屏渲染时间阈值，防止回归。
- 考虑使用 next.config.js 中的 experimental.optimizePackageImports 自动优化包导入。

第七步：启用边缘渲染与流式传输
- 对于 SSR 页面，启用 Next.js 13+ 的 Streaming（流式传输）选项，让服务端分块发送 HTML，浏览器可以逐步渲染。
- 将动态内容部署到 Edge Runtime（如 Vercel Edge Functions），利用全球节点就近渲染，大幅降低延迟。

实战案例：从 6 秒到 1.2 秒

以某中型电商网站为例，其 Next.js 首次加载平均耗时 6 秒。通过以下改动实现了 80% 的性能提升：
- 将商品列表页从 SSR 切换为 SSG + ISR，缓存时间设为 1 小时。
- 拆分大型富文本编辑器，仅在编辑页面动态加载。
- 使用 next/image 替换所有 img 标签，资源体积减少 50%。
- 将第三方价格查询 API 放入客户端组件中，并使用 SWR 缓存。
优化后首屏加载降至 1.2 秒，LCP 指标进入绿色区间。

结语

Next.js 并非“开箱即快”的魔法工具，它的强大能力需要开发者根据应用场景精细调配。从渲染策略的选择到资源加载的优化，每一步都值得反复打磨。当你下次遇到首屏加载缓慢时，不妨对照本文逐项排查，相信你的应用性能将迎来质的飞跃。记住：每个毫秒的缩短，背后都是对用户体验的深度尊重。