使用Next.js进行服务器端渲染与传统SSR的对比

Question

我很习惯SSR的方式，即页面会从服务器接收完整的HTML并进行渲染，这取决于后端堆栈使用的是razor/pub/其他技术。因此，每当用户单击导航链接时，它只需向服务器发送请求，整个页面就会刷新，接收新的HTML。这就是我所了解的传统SSR。

然而，在SPA中，我们比如使用react或angular，开始时几乎获得空白HTML，然后获得JS，以便在客户端上初始化整个应用程序。然后，我们可以使用一些REST API获取JSON数据并在前端呈现视图（客户端路由和呈现），而无需进行任何页面刷新。实际上，我们甚至不需要任何服务器。

现在，我的问题在于理解SSR（例如next.js）如何与react一起工作。

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

我花了很多时间阅读文章，但所有的文章主要都集中在初始请求、SEO、TTFB、首屏渲染等方面，而我只想理解为什么它被称为SSR，因为它似乎与我在一开始描述的传统SSR工作方式不同。

- marc08

Answer 1

Next.js在初始请求之后是否仍然会发出任何服务器请求，还是像典型的CRA一样作为单页应用程序运行？

你说得对。第一个（初始）请求由服务器处理，之后前端处理路由（至少在Next.js的情况下是这样）。

如果您想看一个例子，OpenCollective是使用Next.js构建的。尝试玩一下它，并在开发工具中查看网络选项卡。

我只是想理解为什么它被称为SSR，因为它似乎与我在开头描述的传统SSR不同。

它被称为SSR，因为应用程序实际上在服务器上呈现。虽然初始呈现后前端路由接管了控制权，但这并不意味着服务器没有渲染应用程序，而是用户机器没有渲染。

- Johnny Zabala

---

服务器完成了应用程序的渲染工作，而不是用户计算机。那么Next.js向服务器（如Node）发送请求并获取渲染的页面？还是只是“表现”像服务器？ - vikrant

不确定您所说的“像服务器一样运行”的含义。Next.js是一个Node服务器。它获取您应用程序的js文件，构建它们，并将HTML / CS / JS发送回客户端。 - Johnny Zabala

这里与NextJS的有效区别在于，它使用客户端JS（React）在其SSR方法中再次“水合”页面。正如@JohnnyZabala指出的那样，它更像是一个节点服务器，而不是一个客户端框架/React框架。 - odus-ex

Answer 2

这不是 Next.js 的全部功能。在 Next.js 中，你可以构建所谓的混合式应用程序。

在传统的 SSR 中，服务器处理所有客户端请求。每个请求都发送到服务器并获得响应。 使用类似 React 的经典 CSR，所有事情都在浏览器中通过客户端 JavaScript 发生。

但是，在 Next.js 中，你可以定义三种不同的方法（主要是两种，根据文档）来交付页面。 根据应用程序的需求和要求，可以以纯传统 SSR 模式提供几个页面，以经典 CSR 模式提供几个页面，并且以动态获取数据并即时呈现到页面中的 SSR 模式提供其他页面。

这些功能使得设计一个在各种不同场景下完美运行的 Web 应用程序变得非常灵活。

- Shahryar Rp