Next.js SSG中为何已填充数据的HTML还要附带JSON数据？

Next.js在SSG场景下同时提供静态HTML和__NEXT_DATA__ JSON，并非冗余设计，而是为了保证应用的功能完整性和用户体验，核心原因如下：

• 快速完成客户端水合
  Next.js本质是React应用，静态HTML仅负责首次渲染的内容展示，要让页面具备交互能力，需要将静态DOM转换为React可管理的组件树。直接使用__NEXT_DATA__中的JSON数据作为组件props，能避免React从HTML中解析数据的额外开销，快速完成水合过程，让页面更快响应用户操作。

• 避免重复数据请求
  静态HTML通常只渲染用户可见的核心内容（比如你的例子里只展示了用户名和邮箱），但__NEXT_DATA__包含了完整的数据集（如用户地址、电话、公司信息等）。当后续需要这些额外数据时（比如用户点击查看详情、触发筛选排序），无需再次向服务器发起请求，直接复用已加载的JSON数据，减少网络耗时。

• 保持路由逻辑一致性
  Next.js的客户端路由系统依赖标准化的props数据传递。无论是SSG页面还是客户端路由跳转加载的页面，都通过相同格式的__NEXT_DATA__提供数据，这样框架无需区分不同页面类型做特殊处理，保证了路由逻辑的统一，也简化了开发者的代码编写。

• 支持动态交互场景
  很多页面在静态渲染后还有动态交互需求，比如表单提交、数据编辑、状态切换等。这些交互依赖组件内部的状态管理，而__NEXT_DATA__提供的完整数据可以直接作为初始状态，避免了重新请求数据的过程，让交互更流畅。

拿你给出的例子来说：页面HTML只展示了用户的姓名和邮箱，但JSON里包含了用户的地址、公司等全量数据。如果用户点击某个用户卡片查看详情，应用可以直接从__NEXT_DATA__中提取对应数据展示，不用再发API请求。

内容的提问来源于stack exchange，提问作者Mahdi