为什么静态页面输出在网络上看不到？

Question

我有一个使用 Nextjs 14 创建的项目，并且该项目中有一个关于页面。关于页面中有一个信息组件。当我一开始从主页进入about路由时，Network选项卡中有两个请求。信息组件中的文本（“信息组件”）不在他们的响应中。这段文字到底来自哪里？即使它是在构建时使用 ssg 创建的，当我转到 /about 时，我不应该在网络中看到它吗？

Answer 1

Next.js 项目的 InfoContainer 组件中的文本“信息容器”是 React 渲染的静态内容的一部分。其工作原理如下：

预渲染（SSG 或 SSR）：Next.js 将在构建时（SSG）或根据请求（SSR）预渲染页面。 InfoContainer 组件及其内容（例如“信息容器”）是预渲染 HTML 的一部分。

Hydration：当您从主页导航到 /about 路线时，内容（如“信息容器”文本）已经被预渲染并嵌入到页面的 HTML 中。这就是为什么您看不到它作为网络请求的一部分，因为它不是动态获取的 - 它要么是初始 HTML 的一部分，要么直接从预构建的静态资源呈现。

JavaScript Bundle：将 HTML 提供给浏览器后，Next.js 将使用 React 水合页面。组件代码（包括“信息容器”文本）来自 JavaScript 包，而不是其他网络请求。当您导航到 /about 时，JavaScript 包已经加载。

因此，即使页面是静态生成的 (SSG)，您看到的实际网络请求通常是针对重新水合组件的 JavaScript，而不是针对静态文本本身。这就是为什么在路线之间导航时在网络响应中看不到文本“信息容器”的原因。