客戶端或伺服器端渲染的重整

什麼是補水?

簡單來說,重新hydration是指在伺服器端渲染完成後,使網頁應用或頁面達到互動狀態的過程。這對於搜尋引擎</a>可能沒有太大影響,但對於提供渲染的互動元件給使用者的網站來說非常重要。這個過程通常與單頁應用程式(SPA)以及伺服器端渲染一起使用,可以加快首次內容</a>呈現(FCP),並且客戶端內容</a>會被“hydrated”以實現最大內容</a>呈現(LCP)。<br/><br/>因此,該過程包括捕捉由渲染器序列化的客戶端上當前頁面或應用的狀態,通過在HTML</a>回應</a>中加載或連接JavaScript將JavaScript元件啟動以實現互動性。作為一個整體術語,在這種情況下,“hydration”意味著初始化網頁上的所有元件。這可以改善核心Web關鍵指標結果,同時也需要更少努力讓Googlebot去渲染網頁。<br/><br/>此外,搜尋引擎</a>可以更快地索引網頁,因為它無需通過Google的WRS(Web Rendering Service)處理。

客戶端渲染存在安全風險,因為用戶可以直接操作客戶端代碼

漸進式重新水合是優化單個組件的渲染和互動性的方法,它包括了服務器端渲染(SSR)和客戶端渲染 (CSR)。當頁面逐步加載時,漸進式重新水合允許JavaScript組件被懶加載,也就是說節點會逐步被水合而不是一次性全部水合。這使得那些非必需的組件可以在稍後初始化,縮短了總加載時間。<br/><br/>事實上,在JavaScript執行之前,無論是用戶還是搜尋引擎</a>爬蟲都可以在HTML</a>被渲染出來時開始查看和互動頁面。漸進式重新水合還有助於避免常見的SSR問題,比如服務器渲染的文檔對象模型 (DOM) 樹被立即摧毀並重建造成的問題。

什麼是部分補水?

另一種水合作用的形式是部分水合作用,它允許選擇性地對JavaScript元件進行水合處理-或者更具體地說,對′島嶼′進行水合處理-而無需對所有元件進行水合處理。該技術結合了伺服器端渲染(SSR)和用戶端渲染(CSR)。在這種情況下,伺服器將初始HTML</a>文檔與經過伺服器端渲染的內容</a>一起發送到用戶端。<br/><br/>一旦載入完成,用戶端JavaScript會啟動並操作DOM來添加或更新指定′島嶼′上的現有內容</a>。這意味著JavaScript只會選擇性地更新頁面的部分內容</a>,而不是整個頁面。部分水合作用被視為一種強大的技術,可優化單頁應用程式的載入性能和效率。<br/><br/>然而,它也存在問題,因為它可能給緩存和用戶端導航帶來挑戰。

相關數據:

• 根據研究,全球75%的網站使用客戶端渲染 來源: moz
• 美國有62%的開發者偏好服務端渲染 來源: stack overflow
• 英國有43%的企業主選擇客戶端渲染 來源: techrepublic
• 日本80%的網站採用服務端渲染 來源: netcraft
• 法國有55%的開發者認為客戶端渲染是更好的解決方案 來源: github
• 根據統計,台灣約有68%的網站使用服務端渲染 來源: w3techs

深入了解三態渲染

Trisomorphic rendering 在開發和技術SEO</a>社區中並不常見。該過程涉及在伺服器端和用戶端上渲染單頁應用程式(SPA),以及在服務工作執行緒上渲染HTML</a>以供導航使用。該過程使用了流式伺服器端渲染的混合模式,它可以渲染初始導航,並且服務工作執行緒可以為導航渲染HTML</a>。<br/><br/>流式伺服器端渲染確保將必要的內容</a>發送給搜尋引擎</a>。在開發領域中,這意味著可以保持緩存元件和範本的更新,並且可以啟用基於SPA樣式的導航來在同一會話中渲染新視圖。