React 服務端渲染指南

---

服務端渲染技術已經存在一段時間了。它首次出現在21世紀初，此後被許多網站使用。

這項技術的理念是在伺服器上預渲染HTML頁面，並在客戶端請求時將其傳送回客戶端瀏覽器。

使用服務端渲染 (SSR)，頁面在伺服器上進行渲染。這確保了即使在頁面載入到瀏覽器之前，使用者也可以訪問頁面。

我們將在本文中進一步瞭解 SSR -

服務端渲染 (SSR) 的工作原理？

這是在將網頁傳送到瀏覽器之前在伺服器上渲染網頁的過程。因此，當伺服器返回一個準備渲染的 HTML 頁面和必要的 JS 指令碼時，所有靜態元素都會立即在 HTML 中呈現。

同時，瀏覽器下載並執行 JS 程式碼，這使得頁面具有互動性。瀏覽器現在處理此頁面上的客戶端互動。瀏覽器透過 API 向伺服器傳送請求以獲取任何新內容或資料；只獲取新所需的資訊。

這項技術的優點是它節省時間，減少載入時間，並提高 SEO 排名，因為它透過比傳統的客戶端渲染更快的速度顯示內容來提供更好的使用者體驗。

React 服務端渲染概述

可以使用 ReactDOMServer.renderToString 方法在 React 中實現服務端渲染，然後將字串從 Node.js HTTP 伺服器返回到瀏覽器。

ReactDOMServer 用於服務端渲染，這意味著它會將您的元件渲染到 HTML 字串中，然後將其傳送回客戶端，而不是僅僅將其作為物件或物件陣列返回。

renderToString 方法將您的整個應用程式渲染成單個 HTML 字串，包括您初始化應用程式所需的所有資料，例如 API 響應或初始狀態變數，這非常完美，因為您可以在任何地方使用此字串：在伺服器上；在靜態網站生成器中；甚至在其他專案中！

簡而言之，React 的服務端渲染是伺服器在將網頁傳輸到瀏覽器之前將其轉換為可檢視佈局的過程。因此，動態元件可以作為靜態 HTML 標記提供服務。

當索引無法正確處理 JavaScript 時，這種方法可能對搜尋引擎最佳化 (SEO) 有所幫助。當下載大型 JavaScript 包受緩慢的網路影響時，它也可能很有用。

React 服務端渲染的優勢

最初，服務端渲染意味著每個頁面都在伺服器上渲染和載入。自從引入服務端（通用）React 以來，情況略有變化。因為第一頁是從伺服器渲染的，所以後續頁面直接從客戶端載入。

因此，您可以同時獲得兩全其美：初始服務端內容的強大功能以及僅請求未來請求所需內容的後續載入速度。

React 服務端渲染的一個重要優勢是能夠提高應用程式效能。但是，它遠非服務端渲染的唯一優勢。現在讓我們瞭解 React 整合服務端渲染可以為您的應用程式提供的全部優勢。

內容分發

當社交網路使用者在帖子中分享指向服務端渲染應用程式的連結時，影像和標題會自動生成。因此，社交網路片段可以幫助您吸引人們對應用程式內容的關注並增加流量。

效能提升和使用者滿意度

當渲染客戶端應用程式時，應用程式的 JavaScript 檔案會在應用程式頁面開始載入之前下載到客戶端瀏覽器。由於 JavaScript 檔案通常很大，這會大大增加初始頁面載入時間。您還可以將服務端渲染包含在您的 React 應用程式中。

React 的服務端渲染無需在載入頁面之前下載 JavaScript 檔案。客戶端瀏覽器會立即顯示完全渲染的 HTML 檔案，無需客戶端渲染。

如果您的應用程式使用服務端渲染，您的網站訪問者無需等待應用程式內容載入，而一直盯著無盡的旋轉器或載入器。

準確的頁面載入指標

在客戶端渲染應用程式會阻止伺服器獲取有關客戶端獲取網站內容速度的資訊。

當在客戶端渲染應用程式時，您不知道客戶端檢視應用程式內容需要多長時間。因此，您將不知道速度是否足夠快，或者是否有改進的空間。

搜尋引擎友好性

較長的初始載入時間不僅對使用者來說是個問題。您的使用者可能有足夠的耐心等待頁面載入，但 Google 機器人不會。

這些機器人擅長索引靜態 HTML 頁面，並且速度很快。使用 JavaScript 索引頁面則不能這麼說。與網站訪問者一樣，機器人必須等待下載 JavaScript 檔案才能顯示頁面內容。但是，機器人在一個頁面上花費的時間是固定的。如果您的網站沒有及時載入，機器人將不會對其進行索引，因此也不會對其進行排名。

決定服務端渲染效能的引數？

在使用 React 服務端渲染獲得更好效能時，必須考慮以下三個重要引數 -

• TTFB（第一個位元組時間）- 點選連結和接收第一位內容之間的時間。

• FCP（首次內容繪製）- 呈現請求內容的點。

• TTI（互動時間）- 頁面變得可互動的點。

由於完全渲染的 HTML 頁面被傳輸到瀏覽器，因此 TTFB 可能更高，但 FCP 明顯更快，從而提高了效能和使用者體驗。

渲染網頁所需的指令碼數量及其複雜性都會影響 TTI。當在伺服器端渲染時，由於其適度的互動性，大多數頁面的 TTI 較低。

SSR 的 SEO 和效能

我們現在瞭解 SEO 對增加網站流量的重要性。除 Google 外，大多數搜尋引擎現在都無法在索引之前渲染內容。客戶端渲染是一個即使 Google 也在努力解決的問題。

使用服務端渲染時，初始響應中存在 SEO 所需的所有元素。此外，由於瀏覽器優先處理快速載入的頁面，因此服務端生成的網頁索引更準確。

簡而言之，如果您的網站在伺服器上渲染，它在搜尋結果中的排名會更高。在社交媒體平臺上，連結到使用服務端渲染的網站更適合於充分表示網站的標題和縮圖。

總結

隨著世界變化，我們必須跟上快速的技術變化。React 的服務端渲染是渲染網頁以提高初始頁面載入速度、內容分發、SEO 和使用者體驗的絕佳選擇。

React 服務端渲染最好的方面是平臺和框架的可用性，它們使複雜的概念更容易實現。