NextJS的渲染路径以及优化

NextJS的渲染路径

NextJS的渲染路径大致可以分为以下关键步骤

1. 浏览器加载 NextJS 服务端生成的 HTML、CSS和JavaScript
2. 浏览器构建其初始渲染树
3. 在 JavaScript 资源加载、解析和执行后，客户端React被激活
4. 页面现在可以进行交互

水合

NextJS 在传统的浏览器渲染路径上增加了一个额外的步骤 React 水合：

1. 解析容器的 HTML 为 React Fiber 树
2. 渲染出应用程序预期的 React Fiber 树
3. 对比两者并调和差异
4. 像正常的 React 渲染一样更新容器

NextJS 将其所有的 JS 加载脚本都标记为 async, 能够防止这些脚本阻塞浏览器的关键渲染路径，但会对网站的 CWV 产生很大影响，如果客户端包执行某些操作，例如添加元素或更改某些 CSS 状态，就可能会严重影响 LCP 和 CLS 分数。

并且，JS脚本的延迟加载会影响到预 INP (下一个绘制）的交互，在 JS 加载之前，可能会为用户渲染了一个按钮，但实际上用于处理按钮交互的 JS 尚未加载，将导致按钮在 JS 加载、解析和执行前无法使用

性能关注点

1. 最小化关键路径阻塞资源的数量
2. 减少交互元素加载的资产大小，特别是 JavaScript 资产
3. 减少 React在初始加载时为页面水合所需的工作量

减少使用客户端组件

过多的客户端组件会对性能造成的影响：

• 增加了关键渲染资源的数量
• 正佳了运行页面所需的前端资源的大小
• 增加了 React 为页面进行水合所需要的工作量

经验法则

在客户端组件和服务器组件之间保持严格的隔离
客户端组件尽可能保持简洁，或者将 服务端组件作为 props.children 传递给客户端组件

尝试将客户端组件隔离到叶子节点
尽可能将所有的客户端组件推到NextJS 渲染树的底部
保持客户端组件尽可能的轻量
类似于单一责任原则，努力使客户端组件专注于实现所需的客户端交互功能，保持 最好代码量、最少的 HTML 元素，并将其他组件渲染为服务器组件。

阅读原文
Links: NextJS 性能优化、NextJS的几种 渲染方式、NextJS 区分客户端组件与服务端组件