Mag*_*nus 5 javascript reactjs gatsby next.js
我对缺乏有关客户端渲染(CSR)、服务器端渲染(SSR) 和静态站点生成(SSG) 实际工作原理的具体信息感到困惑。
有大量文章松散地解释了这些概念，但我还没有找到任何一个来源可以深入地解释 HTML、CSS 和 JS 在服务器上和客户端上创建的三个概念。
从 Next.js 文档中，我们可以读到：
- 通过静态渲染，服务器和客户端组件都可以在构建时在服务器上预渲染。
- 客户端组件的 HTML 和 JSON 已预渲染并缓存在服务器上。然后将缓存的结果发送到客户端进行水合作用。
- 服务器组件由 React 在服务器上渲染，它们的有效负载用于生成 HTML。相同的渲染有效负载还用于混合客户端上的组件，从而导致客户端不需要 JavaScript。
注意：静态渲染相当于静态站点生成（SSG）和增量静态再生（ISR）。
和：
- 通过动态渲染，服务器和客户端组件都在请求时在服务器上渲染。
注意：这相当于服务器端渲染(getServerSideProps())。
很好，静态渲染等于静态站点生成(SSG)，这意味着一些 html+css 是在构建时创建的。构建时创建的 html 究竟取决于您使用的是客户端组件还是服务器组件。
我检查了构建的 Gatsby 项目的构建public文件夹，发现没有任何 React 组件实际上被转换为 html（无论它们是否依赖于用户交互）。Gatsby 为每个页面创建了一个 html 文件，但每个页面仍然是用 JS 定义的 React 组件，期望在客户端运行时<body>被 React 转换为 html 。这违背了我对 Next.js 文档中第二个项目符号的理解，该文档指出 html 是“预渲染的”。
问题
通过上述文档，我们是否可以说静态站点生成（SSG）实际上需要服务器 端渲染（SSR）和客户端渲染（CSR）？
如果是这样，这与上面的动态渲染定义（动态渲染等同于服务器端渲染）不冲突吗？
最后，通过客户端组件静态渲染到底创建了什么html+css+js ？
在框架之间来回切换使得这个问题很难具体回答，所以我在这里主要关注 Next.js。
\n实际上只有两个地方 React 组件被转换为 HTML 表示形式[^1]：服务器和客户端/浏览器。除了 Next.js 服务器组件之外，所有 React 组件始终在浏览器中呈现。因此，您的问题主要是关于服务器端渲染的。
\nSSG 和 SSR 之间的区别在于渲染发生的时间以及当时组件可用的信息，而不是 HTML 输出。任何 SSG 兼容页面都会通过 SSR 产生相同的结果，尽管效率较低。
\nNext.js 使用术语 \xe2\x80\x9cStatic\xe2\x80\x9d 和 \xe2\x80\x9cDynamic\xe2\x80\x9d 分别指代 SSG 和 SSR。他们还在 SSG 中包含 ISR（增量静态生成），因为它的工作原理类似，只是延迟了。
\n有了这样的理解，让我们看看你的问题：
\n\n\n通过上述文档，我们是否可以说静态站点生成（SSG）实际上需要服务器端渲染（SSR）和客户端渲染（CSR）？
\n
不会。SSR 意味着渲染是为了响应请求而发生的。SSG 提前发生（通常在与请求隔离的上下文中）。因此，它们是互斥的，尽管两者都可以发生在同一个应用程序中。
\n\n\n如果是这样，这与上面的动态渲染定义（动态渲染等同于服务器端渲染）不冲突吗？
\n
Next.js 使用术语 \xe2\x80\x9cDynamic\xe2\x80\x9d 来指代 SSR\xe2\x80\x94，其中页面是为了响应请求而生成的，并可以访问请求 \xe2\x80\x94 ，以便清楚起见。
\n\n\n最后，通过客户端组件静态渲染到底创建了什么html+css+js？
\n
对于普通 React，所有组件都在客户端上呈现。Next.js 对仅在服务器上呈现的组件有一个较新的、有些实验性的实现，导致它们没有 JS 有效负载在客户端上运行。这实际上是 SSR/SSG，但其中某些成分从未水合。
\n在 vanilla React 中，当在服务器上渲染组件时，页面的 HTML/CSS 以及水合所需的 JS 会发送到客户端（加载 React 客户端并附加到该 HTML）。
\n如果您使用 Next.js 服务器组件，则会生成相同的 HTML/CSS，但将捆绑并发送到客户端的组件 JS 较少。
\n关于您的 Gatsby 示例，当使用 SSG 时，Gatsby 为其了解的每个页面构建静态 HTML 页面，并包含使用 Gatsby\xe2\x80\x99s 客户端路由将页面合并为单页面应用程序所需的 JS配置。我强烈怀疑您在开发期间禁用了 SSR 的情况下检查了该public文件夹，或者在开发中不支持 SSR 的早期版本的 Gatsby 中检查了该文件夹。如果我错了，您可能需要检查一下 Gatsby 的配置方式，因为这并不典型。
^1：我在这里说的是宽松的。组件被渲染，React 根据其输出确定对 DOM 进行哪些操作（如果有）。并非所有组件都会生成要渲染的元素。雅达，雅达。
\n| 归档时间： |
|
| 查看次数： |
4320 次 |
| 最近记录： |