SSGNuxt.js，Gatsby在做什么？

如何解决SSGNuxt.js，Gatsby在做什么？

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

我认为：

1. SSG 生成一个常用的 React 应用程序并渲染 HTML 以进行初始化。 因为它是一个普通的 React App，如果我点击一个按钮并触发一个副作用，就会触发客户端渲染并更新页面。

2. 路由路由触发时，会下载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 中总体上是相同的。

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