使用 next.js 与传统 s-s-r 进行服务器端渲染

Posted 2023-02-22

【中文标题】使用 next.js 与传统 s-s-r 进行服务器端渲染

【英文标题】：Server side rendering with next.js vs traditional s-s-r

【发布时间】：2020-05-24 17:14:19

【问题描述】：

我非常习惯 s-s-r 意味着页面得到完全刷新并从服务器接收完整的 html 的方法，在那里它根据后端堆栈使用 razor/pub/other 呈现。所以每次用户点击导航链接时，它只会向服务器发送一个请求，整个页面就会刷新，接收一个新的 HTML。那就是我理解的传统s-s-r。

然而，对于 SPA，我们有例如 react 或 angular，我们在开始时收到几乎空的 HTML，然后是 JS，以便整个应用程序在客户端初始化。然后我们可以有一些 REST API 来获取 json 数据并在前端渲染视图（客户端路由和渲染），而无需任何页面刷新。我们甚至不需要任何服务器。

现在，我有一个问题是 s-s-r（例如 next.js）如何与 react 一起工作。

从我阅读的内容来看，第一个请求返回完整的 HTML+CSS（这有助于 SEO 等 - 我明白了），但是稍后会发生什么？在第一个/初始请求之后会发生什么？整个 React 应用程序是否在浏览器中初始化，然后它的行为就像是一个普通的 SPA 一样（这意味着我们从现在开始有客户端路由和渲染，无需向该服务器发出任何请求）？换句话说，next.js 是否仍然会在初始请求之后发出任何服务器请求，或者从现在开始它是否像带有 CRA 的典型 SPA？

我花了很多时间阅读，但所有文章主要集中在初始请求和 SEO 以及第一个字节、绘制等的时间上，我只是想理解为什么它被称为 s-s-r，因为它似乎与传统的工作方式不同我在开头描述的s-s-r。

【参考方案1】：

next.js 是否仍然会在初始请求之后发出任何服务器请求，或者从现在开始它是否像带有 CRA 的典型 SPA？

你没看错。第一个（初始）请求由服务器处理，然后前端处理路由（至少在 Next.js 的情况下）。

如果您想查看使用 Next.js 构建的示例 OpenCollective。尝试使用它并查看 DevTools 中的 Network 选项卡。

我只是想理解为什么它被称为 s-s-r，因为它的工作方式似乎与我一开始描述的传统 s-s-r 不同。

之所以称为 s-s-r，是因为应用程序实际上是在服务器上呈现的。前端路由在初始渲染后接管这一事实并没有消除服务器将应用程序渲染为与用户机器相反的工作这一事实。

【讨论】：

“服务器完成了与用户机器相反的渲染应用程序的工作”，所以 Next.js 向服务器（如节点）发送请求并获取渲染页面？或者它只是像服务器一样“表现”？

不确定“表现得像服务器”是什么意思。 Next.js 是一个节点服务器。它获取应用程序的 js 文件，构建它们，然后将 HTML/CS/JS 发送回客户端。

【参考方案2】：

这并不是 Next.js 发生的所有事情，在 Next.js 中，您可以构建称为 Hybrid 应用程序。

在传统的 s-s-r 中，您的所有客户端请求都由服务器处理。每个请求都会发送到服务器并获得响应。 正如您所说，在带有 React 之类的经典 CSR 中，所有事情都通过客户端 javascript 在浏览器中发生。

但是，在 Next.js 中，您可以定义三种不同的方法（根据文档主要是两种）来交付页面。 根据应用程序的需要和要求，您可以在纯传统 s-s-r 模式下提供几个页面，在经典 CSR 模式下提供几个页面，在 s-s-r 模式下通过动态数据获取并呈现到页面上飞。

这些功能为设计在所需的各种不同场景下都能完美运行的网络应用程序带来了很大的灵活性。