SSG（Nuxt.js、Gatsby）在做什么？答案

【问题标题】：What is SSG (Nuxt.js, Gatsby) doing?SSG（Nuxt.js、Gatsby）在做什么？
【发布时间】：2021-07-20 09:05:23
【问题描述】：

我听说 SSG 会生成静态网站。然后我认为 SSG 生成的纯 HTML 不包含 React，但我认为现在可能不是这样。

我认为：

SSG 生成一个常用的 React 应用程序并渲染 HTML 以进行初始化。由于它是一个普通的 React App，如果我点击一个按钮并触发一个副作用，就会触发客户端渲染并更新页面。
触发使用router路由时，会下载下一页的js文件和构建时获取的数据，然后触发客户端渲染。此处未使用下一页呈现的用于初始化的 HTML。

是真的吗？

【问题讨论】：

感谢您的回答！但我认为你的回答有点偏离我的意图。所以我不能选择你的最佳答案，但我申请你。

标签： javascript reactjs nuxt.js gatsby ssg

【解决方案1】：

SSG（Static Site Generators），例如 Gatsby 和 Next，他们所做的是基于反应环境代码。这并不意味着该站点在交互方面是“静态的”。这意味着您请求的页面已经创建，因此您可以避免服务器中的响应和编译时间。

总结一下，给定一个“传统”/“老式”的 PHP 站点。例如，当您请求主页时，您的请求发送到服务器，服务器将 PHP 转换为 HTML（浏览器可以解析和打印的内容），然后您获得该页面。 Gatsby/Next 中省略了该处理时间，因为 HTML 已经创建。

当您在 Gatsby/Next 中构建您的网站时，将从源中检索数据（使用来自 markdown、CMS、API、JSON 等的 GraphQL）并创建输出（这就是生成 /public 文件夹的原因） .您的所有 JavaScript 和 React 都捆绑到输出 HTML 中，因此您的网站在用户交互方面将是“动态的”，React 是生态系统的一部分，因此您的副作用（例如由 useEffect 钩子触发）或您的 @987654321 @process（例如useState hook）将成为您网站的一部分。

解释为：

当您导航到另一个页面时，您正在请求一个已经构建和生成的页面，这就是为什么速度如此之快。

【讨论】：

【解决方案2】：

几周前我在 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 中，总体上是相同的。

SvelteKit 和 Astro 处理这个有点不同。看看可能会很有趣！

【讨论】：