同构 React vs Gatsby（静态网站）React

Question

使用同构（服务器端）React和使用例如Gatsby的静态生成React应用程序之间是否存在任何关键差异或优势？

我知道，两者都会生成HTML以发送到浏览器进行初始页面加载，因此它们都具有SEO优化。并且两者都可以与经过身份验证的路由和非静态内容一起使用。我知道它们不是同一件事，但是它们有什么区别，更重要的是为什么有人会选择其中之一。

提前致谢。

- thecartesianman

Answer 1

有一些不同之处。

1. 正如名称所示，同构渲染需要一个后端服务器；预渲染不需要后端服务器。
2. 使用 SSR，页面和元数据将包括用户特定的数据；预渲染在初始页面加载时不会包括用户特定的数据。
3. 预渲染需要提供多个 .html 文件，并且必须将代理重定向到这些文件；同构渲染仍然是单页应用程序。

在什么情况下，哪种方法会更受青睐？

当在页面加载时最好提供特定于用户的数据（同构）当内容变化不大且不是特定于用户的时候（预）

上述区别是关键的区别。在不同的方法中有各种技术变化。

此外，同构渲染结合了 SSR 和 CSR。同构渲染在浏览器中进行动态路由。只使用 SSR 的解决方案在每个新路由处提供新页面。

两个很好的资源：

https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering

https://jamstack.org

- Chase Owens

---

兄弟，想象一下我用 Gatsby 制作了一个网站，在其中一个页面上我想添加一个动态组件，也就是说当用户点击时它会显示一个随机的好词好句。在 React 中这很容易实现，而且使用 SSR 也很简单，因为 React 接管了用户交互的网站。那么 Gatsby 如何处理这种交互呢？ - Rolly

@roll，我有同样的问题。我在Gatsby文档中找到了答案： 1）静态站点HTML在构建时生成； 2）尽管HTML是静态的，但包含一些JS代码可以从静态HTML重新构建React应用程序（“重新hydration”）； 3）经过这个“重新hydration”阶段，React应用程序将像普通的SPA一样运行。您可以将其用于动态客户端行为，如随机短语、数据获取、身份验证等。 - Thor Galle