问题描述
我听说 SSG 会生成静态网站。 然后我认为 SSG 生成了不包含 React 的纯 HTML，但我认为现在可能不是这样。
我认为：
-
SSG 生成一个常用的 React 应用程序并渲染 HTML 以进行初始化。 因为它是一个普通的 React App，如果我点击一个按钮并触发一个副作用，就会触发客户端渲染并更新页面。
-
路由路由触发时，会下载next page的js文件和build时获取的数据，然后触发客户端渲染。 此处不使用下一页呈现的用于初始化的 HTML。
是真的吗？
解决方法
SSG（Static Site G enerators）就像 Gatsby 和 Next，他们所做的是基于反应环境代码。这并不意味着该站点在交互方面是“静态的”。这意味着您请求的页面已经创建，因此您可以避免服务器中的响应和编译时间。
总结，给出一个“传统”/“老式”PHP 站点。例如，当您请求主页时，您的请求会转到服务器，服务器将 PHP 转换为 HTML（浏览器可以解析和打印的内容），然后您就可以获取页面。 Gatsby/Next 中省略了该处理时间，因为 HTML 已经创建。
当您在 Gatsby/Next 中构建您的网站时，数据会从源中检索（使用来自 Markdowns、CMS、API、JSON 等的 GraphQL）并创建输出（这就是有 /public 文件夹的原因生成）。您的所有 JavaScript 和 React 都捆绑到输出 HTML 中，因此您的网站在用户交互方面将是“动态的”，React 是生态系统的一部分，因此您的副作用（例如由 useEffect 钩子触发）或您的rehydration 进程（例如 useState 钩子）将成为您网站的一部分。
解释为：
当您导航到另一个页面时，您正在请求一个已经构建和生成的页面，这就是为什么速度如此之快。
,几周前我在 Nuxt 讨论中回答了这个问题：https://github.com/nuxt/nuxt.js/discussions/9493#discussioncomment-948643
假设 SSG 带来了几件事：
- 搜索引擎优化
- 速度
- 生态
- [可能是其他一些事情]
执行 SSG 的方法有多种，所有方法都有其优点/缺点和用例。大多数情况下，如果您使用 Nuxt.js，您可能会选择 target: static,ssr: true 路线。
这将：
- 在构建期间生成完全静态的页面，您将能够将其托管在 Netlify、Vercel 或类似平台上
- 获取静态文件后，用一些 JS 对静态内容进行补充
- 之后具有 Vue 行为，作为经典的 SPA（因此无需进一步的服务器调用即可管理路由）
这种行为称为同构或通用，链接讨论中的更多信息。
Gatsby 和 Next.js 的工作方式有些相似。有一些细微的差异，但在这 3 个 AFAIK 中总体上是相同的。