服务器端渲染(Next.js)和静态站点渲染(Gatsby.js)之间有什么区别？

Question

我想创建一个不依赖于客户端JavaScript的网站，但我仍然希望使用客户端路由等SPA功能，因此我正在考虑使用不在客户端渲染的框架。这两个似乎是这种情况下的顶级选项，但我不确定两种不同类型的服务器处理之间的区别。

- Sheen

---

客户端路由依赖于JavaScript，因此如果您使用Gatsby或Next，并且浏览器上没有JS，则网站将仅通过刷新/导航到新页面来正常路由，您将无法获得快速的SPA客户端路由体验。 - Jed Richards

Answer 1

服务端渲染是指客户端/浏览器向服务器发出请求，然后在此时生成HTML代码，并实时返回给浏览器进行渲染。

静态网站渲染非常类似，但解析是在构建时间进行的。因此，当请求发出时，HTML代码已被静态地存储，可以直接发送回客户端。

---

它们都有其优点和缺点：

虽然静态网站在运行时速度更快，因为不需要进行服务器端处理，但这意味着对数据进行任何更改都需要在应用程序服务器端上进行完整的重建。

另一方面，采用服务器端方法，在放置任何缓存的情况下，数据会实时处理并直接发送到客户端。

---

通常，决定最好根据内容需要多动态和实时与应用程序性能之间的平衡来进行。

例如，Stackoverflow很可能使用服务器端渲染方法。它有太多的问题需要每次提交新帖子时重新生成每个问题页面的静态版本。数据还需要非常实时，用户可以看到仅仅几秒钟前提交的帖子。

然而，一个博客网站或促销网站，几乎没有任何内容更改，将更加受益于静态网站设置。响应时间更快，服务器成本更低。

- Curtis

---

所以如果我理解正确的话，Gatsby需要构建整个stackoverflow网站，包括每一个问题，当它访问stackoverflow主页时必须将其发送给客户端？这不可能会导致下载数千兆字节的数据才能查看该网站吗？ - Sheen

@Sean 只有主页的构建版本会发送给客户端，但服务器需要将每个问题的构建版本存储为静态 HTML 文件。我认为 Gatsby 具有静态和 SPA 的优点，因为如果您从主页加载问题页面，则会执行 XHR 请求。 - Curtis

你真的是指HTML被解析了吗？那似乎不对。我会说HTML被“生成”了。 - Felix Kling

“这并不意味着对数据的任何更改都需要在应用服务器端进行完整的重建。”这通常并不正确。例如，如果我创建一个新的博客文章，我只需要生成新文章的页面并更新索引页面即可。 - Felix Kling

@FelixKling 好观点，关于解析/生成。我已经更新了我的回答。 - Curtis