客戶端渲染 (CSR)

客戶端渲染 (CSR) 是現代 Web 開發中的一種常見技術，用於建立互動式和動態應用程式。透過這種技術，我們消除了伺服器呈現頁面的責任，並將其帶到客戶端，讓伺服器處理對它來說最重要的業務規則。透過這種分離，可以提供更流暢、動態的使用者體驗，並且可以創建新型應用程式。優點是多種多樣的，但同時也存在權衡，必須在每個專案中評估是否值得採用這種技術。

什麼是客戶端渲染（CSR）？

客戶端渲染或簡稱CSR，是一種動態應用程式開發技術，其中介面渲染發生在客戶端（瀏覽器）。這與該技術流行之前的做法不同，在這種技術流行之前，伺服器負責渲染頁面，將包含所有內容的 HTML 檔案傳回給客戶端。

透過 CSR，我們將渲染頁面的角色傳遞給瀏覽器（客戶端）。伺服器僅發送一個基本的 HTML 文件，該文件內部包含指向 Javascript 文件的連結。收到此 HTML 後，瀏覽器將下載負責呈現頁面內容的引用的 Javascript 檔案。 CRS的優點是，一旦載入了Javascript文件，內容就可以動態更新，而不依賴對伺服器的新請求。使用戶的瀏覽體驗更加流暢。 CSR 通常用於需要即時互動或非常動態的內容的應用程序，例如單頁應用程式（SPA）。作為不需要 SEO 的內部頁面、儀表板或系統的解決方案。

客戶端渲染如何運作？

使用客戶端渲染的渲染流程範例如下：

1. 使用者造訪網頁，該網頁內部會向伺服器發送請求。
   

2. 伺服器接收請求並透過發送基本 HTML 進行回應，其中幾乎僅包含 JavaScript 和 CSS 檔案的連結。
   

3. 瀏覽器下載此 HTML，完成後發送新請求以下載 HTML 中引用的 JavaScript 和 CSS 檔案。
   

4. JavaScript 檔案下載完畢後，它們將被執行，並執行渲染頁面的過程。
   

5. 從現在開始，JavaScript 控制整個應用程式和使用者交互，動態更新頁面內容，而不需要向伺服器發出新請求。

客戶端渲染的優點

• 速度：CSR 內的頁面之間的導航速度非常快，因為在初始載入後無需向伺服器發出多個請求。
• 使用者體驗：CSR 的使用非常容易理解且效能良好，提供類似於本機應用程式的體驗。
• 關注點分離：CSR實現了前後端分離，讓前端完全由JS管理，而後端只關心資料和業務邏輯。

客戶端渲染的缺點

• 高 JS 負載：在大型應用程式中，JS 檔案可能會變得非常重，這會損害使用者體驗，尤其是在初始應用程式載入時。
• SEO 問題：由於頁面內容在客戶端呈現，搜尋引擎很難對內容建立索引，因為它們需要呈現的 HTML，而在具有 CSR 的應用程式中，HTML 實際上是空的。這對於依賴 SEO 的應用程式來說可能是一個缺點，例如登陸頁面和電子商務。
• 客戶端依賴：由於應用程式在客戶端運行，因此依賴它擁有的資源量，如果用戶的設備資源很少，這可能會對用戶體驗產生負面影響。此外，如果裝置停用了 JavaScript 執行，應用程式將無法運作。

結論

在本文中，我們介紹了使用企業社會責任的要點，介紹了其基本原理及其優缺點。透過CSR流程，我們了解CSR生命週期的主要階段。我們可以看到 JavaScript 在提供完全在客戶端運行的應用程式方面的重要性。 儘管 CSR 在使用者體驗方面有好處，但很明顯，這種渲染技術存在一些與高 JavaScript 負載和 SEO 相關問題相關的缺點。

為了克服 CSR 的局限性，我們提供了靜態站點生成（SSG）和伺服器端渲染（SSR）等解決方案。在 SSG 中，頁面是在 build 期間靜態產生的，從而產生可以交付給客戶端的 HTML。對於 SSR，渲染是在伺服器端完成的，伺服器端以已經渲染到客戶端的 HTML 進行回應。

以上是客戶端渲染 (CSR)的詳細內容。更多資訊請關注PHP中文網其他相關文章！