了解 Next.js 中的 CSR：客戶端渲染解釋

CSR（客戶端渲染）是一種在客戶端渲染頁面的方法，這意味著它不在伺服器上運行。 CSR 本質上與 SPA（單頁應用程式）相同，因此如果您熟悉 SPA 是什麼及其工作原理，那麼您就已經了解了 CSR。但如果你不確定什麼是 SPA 或它是如何運作的，我會在下面向你解釋。

在這篇文章中，我將描述什麼是 SPA 以及它是如何運作的。之後，我會將其與 Next.js 中的 CSR 進行比較，並向您展示如何在 Next.js 專案中實作 CSR。

什麼是水療？

SPA（單頁應用程式）由單一 HTML 頁面組成，該頁面根據需要動態重寫內容，而不是為每次互動加載新的 HTML 頁面。

MPA 是如何運作的？

在了解SPA之前，首先應該先了解MPA。讓我們來了解一下：

在 SPA 流行之前，網站是使用多頁面應用程式 (MPA) 方法建立的。那麼海洋保護區是如何運作的呢？想像一下，作為一名開發人員，您想要建立一個具有兩個頁面的網站：主頁（「/」）和關於頁面（「/about」）。要使用多頁方法建立此文件，您需要為每個路由建立兩個單獨的 HTML 文件：main.html 表示“/”，about.html 表示“/about”。

在每個 HTML 檔案中，您必須為該頁面編寫特定的 HTML、CSS 和 JavaScript 程式碼。但是，程式碼的某些部分（例如頁首和頁尾）在所有兩個頁面中都是相同的。即使頁首和頁尾相同，作為開發人員，您也必須在每個 HTML 文件中重複它們。

當專案完成並部署在伺服器上時，伺服器會將完整的 HTML 頁面以及所有請求的資源傳送給使用者。例如，當使用者第一次造訪主頁時，伺服器發送準備好的main.html文件，使用者稍等片刻就可以看到內容。這種方法有利於 SEO，因為當搜尋引擎爬蟲造訪您的網站時，它可以看到 HTML 檔案中的所有內容，因為它是預先完全渲染的。

但是，當使用者導航到另一個頁面（例如「/about」）時，流程會再次開始。伺服器發送 about.html 檔案及其所有資源（CSS、JS 等）。使用者必須再次等待頁面加載，如果網路連線速度較慢，則等待時間會更長。更低效的是，使用者必須再次下載相同的頁首和頁尾程式碼，即使它們沒有改變。在當今的 Web 開發實踐中，這種重複的程式碼（如頁首和頁尾）既浪費又低效。

水療如何運作？

現在您已經了解了 MPA（多頁面應用程式）的工作原理，接下來讓我們深入了解 SPA 的工作原理。

由於每次請求載入頁面的延遲、程式碼的重複以及每次都需要重建整個 DOM，因此引入了 SPA 來解決這些問題。

假設您是一名開發人員，正在建立一個具有兩條路線的網站：「/」和「/about」。在 SPA 框架中，只有一個名為 index.html 的 HTML 檔案。您無需為每個路由建立單獨的 HTML 文件，而是為每個頁面建立元件並動態加載它們。例如，您將建立三個元件 - 每個路由一個，並將它們匯入到您的 index.html 中。

在 SPA 中，您也可以將網站的可重複使用部分（例如頁首和頁尾）分成自己的元件。您無需為每個頁面編寫相同的頁首和頁尾程式碼，只需在需要時匯入這些元件，類似於函數的工作方式。這減少了重複並使開發變得更容易。

當你的SPA專案部署到伺服器上時，伺服器不再渲染頁面內容。相反，它提供 index.html 檔案以及包含您的元件的 JavaScript 套件。渲染發生在客戶端的瀏覽器。

當使用者第一次造訪您的網站時，伺服器會傳送index.html 檔案以及必要的JavaScript 檔案。與 MPA 相比，這可能會導致更長的等待時間，因為整個 DOM 是在 JavaScript 完全下載、解析和執行後建置的。

但是，一旦載入初始頁面，在 SPA 中頁面之間的導航就會快得多。例如，如果使用者從 / 導航到 /about，則瀏覽器不需要重新載入整個頁面。由於頁首和頁尾等常見元素已加載，因此瀏覽器僅取得更改的特定內容（例如 /about 頁面內容）的 JavaScript。 DOM 動態更新，無需刷新整個頁面，讓使用者感覺他們正在與應用程式而不是傳統網站互動。這提供了更流暢、更「像應用程式」的體驗。

但是，SPA 也有缺點，尤其是在 SEO 方面。由於初始的index.html 檔案包含最少的內容（大部分的資料是透過JavaScript 載入），搜尋引擎爬蟲可能會看到一個空白頁面並且難以對內容建立索引。這就是為什麼 SPA 中的 SEO 比傳統 MPA 更具挑戰性。

CSR 與 SPA 方法相同嗎？

是的，CSR（Client-Side Rendering）是一種渲染方式，意思是將元件轉換成可以在瀏覽器中顯示的格式，讓使用者看到頁面的過程。要理解的關鍵是 CSR 完全發生在瀏覽器中。對於 React 和 Next.js，CSR 的工作方式相同，在客戶端渲染方面兩者沒有區別。

例如，在CSR中，當您第一次造訪網站時，伺服器會傳送一個內容最少的index.html檔案。但問題是──這個文件還沒有完整的內容。下載所有必要的元件檔案（JavaScript、CSS 等）後，實際內容將會在瀏覽器中呈現。然後，React 建立 DOM 樹（文件物件模型），然後建立虛擬 DOM，它就像真實 DOM 的輕量級副本。

一旦 DOM 和虛擬 DOM 設定完畢，使用者就可以看到頁面了。這個渲染過程發生在瀏覽器中，將所有元件轉換為可顯示的頁面。

現在，當使用者從一個頁面導航到另一個頁面（例如從 / 到 /about）時，React 會為新頁面建立一個新的虛擬 DOM。它將舊的虛擬 DOM 與新的虛擬 DOM 進行比較，找到差異，並將這些變更套用到真實 DOM。比較和更新 DOM 的過程有效率地進行，並且全部發生在瀏覽器中。

所以，總而言之，CSR 在 React 和 Next.js 中的工作方式是相同的。渲染發生在瀏覽器中，React 使用虛擬 DOM 高效處理 DOM 更新，使用戶體驗流暢、快速。

如何在 Next.js 中實作 CSR？

如果您在元件中使用 useEffect 等客戶端方法，而不是 getStaticProps 或 getServerSideProps 等伺服器端方法，您的頁面將按照 CSR（客戶端渲染）方法在客戶端上渲染。這意味著瀏覽器在載入初始 HTML 後處理渲染。

此外，使用 SWR 或 TanStack Query 等程式庫也可以啟用 CSR，因為這些庫在頁面載入後處理用戶端中的資料擷取。這樣，您的元件就會在瀏覽器中呈現，並且任何資料更新都在客戶端無縫發生，無需伺服器端參與。

結論

CSR是一種在客戶端渲染我們的專案的方法，它本質上與SPA（單頁應用程式）的定義相同。 React 使用 CSR 進行渲染，這是 MPA（多頁面應用程式）和 SPA 之間的主要區別之一。 Next.js 也使用了 CSR，因為它是基於 React 建立的，但為了改善 SEO 和增強用戶體驗，Next.js 添加了 SSG、ISR 和 SSR。您可以閱讀有關 SSR、ISR 和 SSG 的資訊。如果您想了解我的最新文章，請關注我的網站 https://saeed-niyabati.ir。感謝您的閱讀！暫時再見！

以上是了解 Next.js 中的 CSR：客戶端渲染解釋的詳細內容。更多資訊請關注PHP中文網其他相關文章！