使用 next.js 與傳統 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 的情況下）。

如果你想看一個例子OpenCollective是用 Next.js 構建的。 嘗試使用它並查看 DevTools 中的 Network 選項卡。

我只是想了解為什么它被稱為 SSR，因為它的工作方式似乎與我在開始時描述的傳統 SSR 不同。

之所以稱為 SSR，是因為應用程序有效地在服務器上呈現。 前端路由在初始渲染后接管這一事實並不能消除服務器將應用程序渲染為與用戶計算機相反的事實。

Answer 2

這不是 Next.js 發生的所有事情，在 Next.js 中，您可以構建稱為混合應用程序的東西。

在傳統的 SSR 中，您的所有客戶端請求都由服務器處理。 每個請求都會到達服務器並獲得響應。 在像 React 這樣的經典 CSR 中，正如您所說，所有事情都通過客戶端 javascript 在瀏覽器中發生。

但是，在 Next.js 中，您可以定義三種不同的方法（根據文檔主要是兩種）來交付頁面。 根據應用程序的需求和要求，您可以在純傳統 SSR 模式下提供幾個頁面，在經典 CSR 模式下提供幾個頁面，在 SSR 模式下通過動態數據提供服務，這些數據獲取並呈現到頁面上的頁面中飛。

這些功能為設計在所需的各種不同場景中表現完美的 Web 應用程序帶來了很大的靈活性。