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

Question

我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法，其中根据后端堆栈使用 razor/pub/other 进行渲染。因此，每次用户单击导航链接时，它只会向服务器发送请求，整个页面将刷新，接收新的 HTML。这就是我理解的传统SSR。

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

现在，我无法理解 SSR(例如 next.js)如何与 React 配合使用。

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

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

Answer 1

在第一个请求之后，next.js 是否仍会发出任何服务器请求，或者从现在开始它的行为就像带有 CRA 的典型 SPA 一样吗？

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

如果你想看例子OpenCollective使用 Next.js 构建。尝试使用它并查看开发工具中的“网络”选项卡。

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

之所以称为 SSR，是因为应用程序实际上是在服务器上呈现的。前端路由在初始渲染后接管的事实并不能消除服务器完成与用户计算机相反的渲染应用程序的工作的事实。