闲聊——Next.js到底有多坑

说实话，我第一次踩 Next.js，真是又爱又恨。

那种感觉，就像吃辣椒，先刺激后上瘾。

哈哈，别kan它官方文档写得挺漂亮，实际玩起来却经常卡壳。

咱就是说性Neng这块儿，一点儿dou不Neng马虎。

今天就跟你唠嗑几招深度实践，让你的页面飞起来。

Next.js 本身会对每个路由自动分包。

不过有些第三方库体积真的够吓人的。

比如 lodash，全家桶直接塞进去，大概七十多 KB gzipped。

不对不对，应该是直接用按需加载。

动态导入配合 ssr:false，Neng把重型组件留到客户端再拉。

举个例子：

import dynamic from 'next/dynamic';
const HeavyChart = dynamic => import, {
  ssr: false,
  loading:  => 
图表加载中...
});

这样首屏渲染就不会被卡住。

next/image 是神器，但要记得给宽高占位。

不然浏览器会等图片尺寸算出来才继续排版，CLS 爆表。

还有一点，小图用 blur‑placeholder，大图才用 priority 加速首屏渲染。

Next.js 的 fetch 支持 cache 参数，你Ke以根据业务场景挑选。

比如站点配置这种几乎不变的东西，用 force‑cache 永久缓存。

const siteConfig = await fetch('/api/site-config', {
  cache: 'force-cache'
});

实时数据比如行情，用 no‑store 确保每次dou拿Zui新的。

const price = await fetch('/api/price', {
  cache: 'no-store'
});

大多数列表页，用 revalidate 每小时或每天自动刷新即可。

geng新用户信息后你想立刻让个人页刷新？

用 revalidateTag 把对应标签的缓存清掉就行了。

import { revalidateTag } from 'next/cache';
await db.users.update;
revalidateTag;

我以前写 getServerSideProps，总是一条一条请求 API，等得我咖啡dou凉了。

其实 Promise.all Neng把它们一起发，让总时长降到Zui大单个请求时间。

const  = await Promise.all();

S S R Neng保证首屏 SEO，但每次请求dou要跑一次 Node，成本高。

I S R在构建时预渲染，然后在后台按需geng新，兼顾速度和新鲜度。

打开 next/bundle-analyzer，kankan到底哪个包Zui肥。

ANALYZE=true npm run build
# 再跑 npm run start

# 不要忘记在 next.config.js 把 analyzer 包裹进去哦！

Pnpm workspace 或者 Yarn workspaces Neng把共享库抽离出来只打一次包。

LCP、CLS、INP，这三兄弟直接决定搜索排名和用户留存率。

C​ode 中加上 SpeedInsights 和 Analytics，把真实用户数据送回后台。

1️⃣ 把关键图片放进 next/image，并开启 lazyBoundary=2000；

2️⃣ CSS 放在 Head 顶部，不要让 @import 拉跨；

3️⃣ 用 font-display: swap 避免文字闪烁。

⦿ 给所有 img、video 明确宽高；

⦿ 动态插入广告前占位；

⦿ 使用 CSS will-change 提前告知浏览器。

这个问题常被问到，我也曾苦恼过好久。

说实话，百度爬虫对 JavaScript 渲染的支持比 Google 弱hen多。

Ru果你的页面全靠 client‑side 渲染，那爬虫根本kan不到内容。

Tuning Serverless 函数响应时间 —— 别让冷启动吓到你