react的ssr專案是什麼

在react中，ssr是「Server Side Rendering」的縮寫，是伺服器端渲染的意思；ssr是將同一個元件渲染為伺服器端的HTML字串並傳送到瀏覽器，將這些靜態標記"啟動"為客戶端上完全可互動的應用程式。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react的ssr專案是什麼

SSR：Server Side Rendering

資料和HTML 的拼接是在伺服器端完成的，客戶端向伺服器端發送請求，伺服器端傳回拼接好的HTML，客戶端只需顯示出來。

現在很多的前端專案都是單頁應用，為了良好的使用者體驗和前後端分離，我們會單獨創建獨立的客戶端程式。現在已經有了很多成熟的建構客戶端應用程式的框架，我們可以直接拿來使用並加以修改成專案所需的，當然，我們也可以完全根據自己的需求去搭建。

預設情況下，可以在瀏覽器中輸出元件，進行產生 DOM 和操作 DOM 來實現使用者互動。然而，有時也可以將同一個組件渲染為伺服器端的HTML 字串，將它們直接發送到瀏覽器，最後將這些靜態標記"激活"為客戶端上完全可交互的應用程序，這就是伺服器端渲染。

為什麼要使用SSR

與傳統SPA (單頁應用程式(Single-Page Application)) 相比，伺服器端渲染(SSR) 的優點主要在於：

更好的SEO，由於搜尋引擎爬蟲抓取工具可以直接查看完全渲染的頁面。

單頁應用程式的頁面都是透過ajax 去請求數據，動態生成頁面，而搜尋引擎爬蟲因為不能抓取JS生成後的內容，遇到單頁應用項目，什麼都抓取不到，不利於SEO，而SSR 會在伺服器端產生頁面傳送到客戶端，查看的是完整的頁面，對於像about 、contact 頁等的頁面更加方便SEO。

解決首屏白屏問題。對於緩慢的網路情況或運行緩慢的設備，無需等待所有的 JavaScript 都完成下載並執行，才顯示伺服​​器渲染的標記，所以你的用戶將會更快速地看到完整渲染的頁面。通常可以產生更好的使用者體驗。

單頁套用在第一次載入時，需要將一個打包好（requirejs 或 webpack 打包）的 js 傳送到瀏覽器後，才能啟動應用，這樣會有些慢。如果在伺服器端就預先完成渲染網頁後，直接傳送到瀏覽器，這樣使用者將會更快速地看到完整的渲染的頁面，通常會產生更好的使用者體驗。

SSR 工作流程

#由上圖可以看到，服務端只產生HTML 程式碼，而前端會產生一份main.js 提供給服務端的HTML 使用。這就是 React SSR 的工作流程。

推薦學習：《react影片教學》

以上是react的ssr專案是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！