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

Question

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

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

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

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

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

Answer 1

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

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

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

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

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