1

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

我认为：

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

  2. 触发使用router路由时，会下载下一页的js文件和构建时获取的数据，然后触发客户端渲染。此处不使用下一页呈现的用于初始化的 HTML。

这是真的吗？

4

2 回答 2

3

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

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

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

解释为：

盖茨比方案

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

于 2021-07-20T10:47:50.083 回答
1

几周前我在 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处理这个有点不同。看看可能会很有趣！

于 2021-07-20T09:30:33.750 回答