React 中的客戶端渲染是什麼？

---

客戶端渲染是一種用於 Web 開發的技術，用於提高網頁的效能。它將瀏覽器的渲染過程從伺服器轉移到客戶端。這樣，就不需要進行往返請求來渲染頁面。

讓我們首先討論一下當您的程式需要客戶端渲染時會發生什麼。React 應用程式是透過從簡單的 HTML 文件呼叫一個或多個 JavaScript 模組來開發的，同時僅使用 CLI 或 React 命令 create-react-app。

每個頁面的 HTML 由 JavaScript 建立並載入到網站中，JavaScript 會自動將其新增到文件的儀器模型中。所有操作都發生在該客戶端側。

讓我們探討一下 React.js 中的客戶端渲染是什麼 -

關於客戶端渲染

客戶端渲染是一種相對較新的渲染網站的方法，它是在 JavaScript 庫開始支援它之後才開始流行的。

當您討論客戶端渲染時，指的是使用 JavaScript 在網頁上顯示資訊。

客戶端渲染是在客戶端生成 HTML 的過程，無需向伺服器傳送請求。

因此，只獲得一個包含 JS 指令碼的最小 HTML 檔案進行早期載入；然後使用 Web 伺服器渲染網站的其餘部分，而不是直接從 HTML 檔案接收所有內容。此過程可以加快頁面載入速度並使互動更流暢。

使用客戶端渲染時，第一頁載入速度有點慢。但是，此後每個後續頁面載入速度都很快。此方法僅與伺服器通訊以獲取執行時資訊。

此外，每次呼叫網站後，都不需要重新載入完整的使用者介面。

客戶端系統可以透過僅重新渲染特定 DOM 元件來使用更新的資料重新整理使用者介面。目前，用於客戶端渲染的框架中最顯著的示例是 React.js 和 Angular。

React.js 中的客戶端渲染

在 React 中，客戶端渲染由其核心功能之一 - 虛擬 DOM 支援。虛擬 DOM 是一個儲存 DOM 樹副本的 JavaScript 物件，可用於

快速比較真實 DOM 樹。React 利用這一點，只更新已更改的內容以節省處理時間並加快網站載入速度。

伺服器端渲染和客戶端渲染之間的主要區別在於，使用伺服器端渲染，瀏覽器僅在請求時從伺服器接收 HTML，而使用客戶端渲染，瀏覽器還從伺服器獲取 JavaScript，然後在顯示任何內容之前執行它，這意味著只要後端的資料發生變化，就不需要重新載入或重新整理頁面。

React 中的客戶端渲染比伺服器端渲染快得多，因為瀏覽器和伺服器之間的往返次數更少。相反，您的所有 JSX 都將傳送到您的瀏覽器，以便您可以立即渲染您的應用程式！

客戶端渲染的工作原理？

客戶需要透過使用 Web 伺服器和地址訪問任何 Web 內容（連結）。

當客戶端最初請求站點時，主機將靜態內容（Html 和 CSS）傳送到客戶端的 Web 伺服器。

HTML 資訊應首先下載，然後下載 JavaScript，由使用者的瀏覽器下載。這些 Html 文件連結到 JavaScript。載入操作在客戶觀察到網站開發人員指定的載入指示器時開始。客戶端尚無法訪問網站。

客戶端的網頁在下載 JavaScript 後不斷生成資訊。

由於客戶端瀏覽並與網站互動，因此線上內容變得可用。由於此過程，初始載入時間延長了。

在簡短的介紹性載入時間後，網站的瀏覽速度將非常快且無縫，只需 API 請求即可自動檢索資訊。

為什麼要使用客戶端渲染？

客戶端渲染是一種允許 Web 瀏覽器顯示網站內容而無需等待從伺服器下載整個頁面的技術。

此技術的一些好處是它可以加快頁面載入速度、使搜尋引擎更快地索引您的內容以及幫助 SEO。

• 速度 - 客戶端渲染總的來說很快。似乎有幾個變數可能會影響速度，包括您的網路速度、CPU 的計算能力、API 的響應時間以及您的 Web 主機響應請求的速度。

• 客戶請求 API 資訊 - JavaScript 可以自動生成您的網站，同時允許它透過 API 併發訪問資料庫。您的網站通常會在填充資料庫檔案之前獲取靈活的 HTML。客戶端的響應和對任何 API 的請求時間都比伺服器慢。

• 客戶操作 - 必須記住，當應用程式使用客戶端渲染時，使用者 CPU 處理所有 JavaScript 功能。通常，這不會太苛刻，並且大多數計算機必須能夠處理它。網站應該顯示得非常快。您可能會注意到，在某些情況下擁有客戶端的操作並非最佳選擇，例如在廉價或舊的 PC 上，這些 PC 的處理器速度較慢。

優缺點

客戶端渲染對於 Web 主機來說成本更低，因為它減少了對其資源的壓力，因為整個渲染責任都由使用者承擔。

此外，它是 JavaScript 網頁的標準設定，這使得 Web 開發人員在客戶端渲染方面比在伺服器端渲染方面更容易。

• 檢視者可以瀏覽您的網頁，而無需來回訪問伺服器。這為您的網站提供了快速、幾乎類似於原生應用程式的體驗。

• 客戶端渲染的應用程式不需要網站。您的應用程式可以輕鬆地託管在任何 CDN 或靜態檔案伺服器上，例如 Amazon S3。有許多免費選項可用於託管客戶端渲染的應用程式。

當在客戶端渲染中使用 JavaScript 時，瀏覽器更難以分析站點的輸出，導致 SEO 明顯下降。

為了使搜尋引擎最佳化取得成功，內容需要在搜尋引擎的結果頁面上得到適當的渲染、索引和排名。對於使用客戶端渲染的網站，情況並非總是如此。

客戶端渲染的缺點

• 客戶端渲染的應用程式需要透過 API 閘道器進行中間輪詢才能進行渲染。因此，與具有類似功能的靜態或伺服器端渲染的應用程式相比，您的網站將始終載入得更慢。

• 在較慢的計算機和移動裝置上，客戶端渲染可能會使載入時間增加幾秒鐘。由於此原因，使用者可能會變得不耐煩並在網站完全載入後離開。

• 客戶端渲染的應用程式通常存在 SEO 問題。儘管 Google 做出了相反的承諾，但使用 JavaScript 的網站在搜尋結果中的排名通常很差。當載入時間過長時，您的網站可能會被歸類為空白頁面。

結語

大多數 Web 應用程式都是伺服器端渲染的。這會在伺服器上渲染頁面，然後將其傳送給使用者。這樣做的缺點是頁面載入需要很長時間，有些人可能需要等待很長時間才能看到任何內容。

客戶端渲染的應用程式載入速度更快，因為瀏覽器在載入內容之前不需要等待來自伺服器的請求。缺點是此類應用程式可能出現更多問題，例如當 HTML 檔案或 JavaScript 程式碼發生更改時。