使用 next.js 与传统 SSR 进行服务器端渲染
Server side rendering with next.js vs traditional SSR
我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收到完整的 HTML 的方法，根据后端堆栈使用 razor/pub/other 呈现页面.所以每次用户点击导航链接时，它只会向服务器发送一个请求，整个页面都会刷新，接收到一个新的 HTML。那就是我理解的传统SSR。
然而，对于 SPA，我们有例如 react 或 angular，我们在开始时收到几乎是空的 HTML，然后是 JS，以便整个应用程序在客户端初始化。然后我们可以使用一些 REST API 来获取 json 数据并在前端呈现视图（客户端路由和呈现），而无需任何页面刷新。我们甚至不需要任何服务器。
现在，我无法理解 SSR（例如 next.js）如何与 React 一起工作。
根据我正在阅读的内容，第一个请求 returns 完整 HTML+CSS（这有助于 SEO 等 - 我明白了），但是 什么稍后会发生什么？ first/initial 请求之后会发生什么？整个 React 应用程序是否在浏览器中初始化，然后它的行为就好像它是一个普通的 SPA 一样（这意味着我们从现在开始有客户端路由和渲染，不需要向该服务器发出请求）？换句话说，是否 next.js 在初始请求之后仍会发出任何服务器请求，还是从现在起它就像一个带有 CRA 的典型 SPA？
我花了很多时间阅读，但所有文章都主要关注初始请求和 SEO 以及第一个字节的时间、绘制等，我只是想理解为什么它被称为 SSR，因为它的工作方式似乎不同于我在开头描述的传统SSR
next.js 是否仍会在初始请求之后发出任何服务器请求，还是从现在起它就像一个带有 CRA 的典型 SPA？
你没看错。第一个（初始）请求由服务器处理，之后由前端处理路由（至少在 Next.js 的情况下）。
如果你想看一个例子 OpenCollective 是用 Next.js 构建的。尝试使用它并查看 DevTools 中的“网络”选项卡。
我只是想了解为什么它被称为 SSR，因为它的工作原理似乎与我在开头描述的传统 SSR 不同。
之所以称为 SSR，是因为该应用程序实际上是在服务器上呈现的。前端路由在初始渲染后接管的事实并没有消除服务器完成渲染应用程序而不是用户机器的事实。
这并不是 Next.js 发生的所有事情，在 Next.js 中，您可以构建一个名为 Hybrid 应用程序的东西。
在传统的 SSR 中，所有客户端请求都由服务器处理。每个请求都会发送到服务器并获得响应。
正如您所说，在带有 React 之类的经典 CSR 中，所有事情都通过客户端在浏览器中发生 javascript。
但是，在 Next.js 中，您可以定义三种不同的方法（根据文档，主要是两种）来传递页面。
根据应用程序的需要和要求，您可以在纯传统 SSR 模式下提供几个页面，在经典 CSR 模式下提供几个页面，在 SSR 模式下提供几个通过获取并呈现到页面上的动态数据飞.
这些功能为设计一个在需要的每个不同场景中都能完美运行的网络应用程序带来了很大的灵活性。
我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收到完整的 HTML 的方法，根据后端堆栈使用 razor/pub/other 呈现页面.所以每次用户点击导航链接时，它只会向服务器发送一个请求，整个页面都会刷新，接收到一个新的 HTML。那就是我理解的传统SSR。
然而，对于 SPA，我们有例如 react 或 angular，我们在开始时收到几乎是空的 HTML，然后是 JS，以便整个应用程序在客户端初始化。然后我们可以使用一些 REST API 来获取 json 数据并在前端呈现视图（客户端路由和呈现），而无需任何页面刷新。我们甚至不需要任何服务器。
现在，我无法理解 SSR（例如 next.js）如何与 React 一起工作。
根据我正在阅读的内容，第一个请求 returns 完整 HTML+CSS（这有助于 SEO 等 - 我明白了），但是 什么稍后会发生什么？ first/initial 请求之后会发生什么？整个 React 应用程序是否在浏览器中初始化，然后它的行为就好像它是一个普通的 SPA 一样（这意味着我们从现在开始有客户端路由和渲染，不需要向该服务器发出请求）？换句话说，是否 next.js 在初始请求之后仍会发出任何服务器请求，还是从现在起它就像一个带有 CRA 的典型 SPA？
我花了很多时间阅读，但所有文章都主要关注初始请求和 SEO 以及第一个字节的时间、绘制等，我只是想理解为什么它被称为 SSR，因为它的工作方式似乎不同于我在开头描述的传统SSR
next.js 是否仍会在初始请求之后发出任何服务器请求，还是从现在起它就像一个带有 CRA 的典型 SPA？
你没看错。第一个（初始）请求由服务器处理，之后由前端处理路由（至少在 Next.js 的情况下）。
如果你想看一个例子 OpenCollective 是用 Next.js 构建的。尝试使用它并查看 DevTools 中的“网络”选项卡。
我只是想了解为什么它被称为 SSR，因为它的工作原理似乎与我在开头描述的传统 SSR 不同。
之所以称为 SSR，是因为该应用程序实际上是在服务器上呈现的。前端路由在初始渲染后接管的事实并没有消除服务器完成渲染应用程序而不是用户机器的事实。
这并不是 Next.js 发生的所有事情，在 Next.js 中，您可以构建一个名为 Hybrid 应用程序的东西。
在传统的 SSR 中，所有客户端请求都由服务器处理。每个请求都会发送到服务器并获得响应。 正如您所说，在带有 React 之类的经典 CSR 中，所有事情都通过客户端在浏览器中发生 javascript。
但是，在 Next.js 中，您可以定义三种不同的方法（根据文档，主要是两种）来传递页面。 根据应用程序的需要和要求，您可以在纯传统 SSR 模式下提供几个页面，在经典 CSR 模式下提供几个页面，在 SSR 模式下提供几个通过获取并呈现到页面上的动态数据飞.
这些功能为设计一个在需要的每个不同场景中都能完美运行的网络应用程序带来了很大的灵活性。