然後,通常透過 SSR 設置,React 會在客戶端重新運行,在相同的渲染 HTML 上運行,並執行諸如連接點擊處理程序和添加交互性之類的操作。這就要求伺服器和客戶端有相同的資料來渲染。這是透過將伺服器上的資料序列化為客戶端上的 標籤以及表示 React 狀態的物件來完成的,並且 React 在具有相同狀態的客戶端上「水合」。如果客戶端有不同的數據,它將產生不同的 DOM 樹,並覆蓋伺服器創建的內容,這違背了 SSR 的目的。
在伺服器和用戶端都使用 React,初始頁面載入可以是 SSR,然後後續頁面載入可以是客戶端。對於初始頁面加載,SSR 比客戶端渲染快得多,一旦下載完所有 Javascript 資源,客戶端渲染速度就會更快。當您使用 SSR 時,Next.js 預設執行此策略。
在這兩種情況下,React Javascript 程式碼都是由 Node.js(或 Deno,或您正在使用的任何東西)執行的。但它們產生不同的東西。
服務端渲染
伺服器端渲染是指React 使用ReactDom 的ReactDom 的renderToString() 方法,並將該HTML 字串傳送到客戶端,與傳送靜態HTML 的任何伺服器相同。
然後,通常透過 SSR 設置,React 會在客戶端重新運行,在相同的渲染 HTML 上運行,並執行諸如連接點擊處理程序和添加交互性之類的操作。這就要求伺服器和客戶端有相同的資料來渲染。這是透過將伺服器上的資料序列化為客戶端上的
標籤以及表示 React 狀態的物件來完成的,並且 React 在具有相同狀態的客戶端上「水合」。如果客戶端有不同的數據,它將產生不同的 DOM 樹,並覆蓋伺服器創建的內容,這違背了 SSR 的目的。
在伺服器和用戶端都使用 React,初始頁面載入可以是 SSR,然後後續頁面載入可以是客戶端。對於初始頁面加載,SSR 比客戶端渲染快得多,一旦下載完所有 Javascript 資源,客戶端渲染速度就會更快。當您使用 SSR 時,Next.js 預設執行此策略。
伺服器元件
伺服器元件不會呈現為 HTML 字串。
React「元件」是傳回 React「元素」的函數或類別。 React「元素」是要渲染的樹的物件表示。在正常操作模式下,ReactDOM 會取得這些元素物件並將它們渲染到 DOM。
伺服器元件將反應元素傳回客戶端。在伺服器上,元件運行並產生元素,這些元素被傳遞到客戶端(基本上作為 JSON)。然後,這些元素在客戶端上呈現並放入 DOM 中。