伺服器端渲染和客戶端渲染有什麼區別？

作者｜Alex Grigoryan 編輯｜薛命燈

我們在walmart.com網站上的大多數頁面採用伺服器端渲染（簡稱SSR）方式。之所以選擇伺服器端渲染，主要出於以下兩點考慮：

• 能夠為客戶提供更理想的性能

• 提供更為一致的SEO表現

正是由於SSR擁有上述優勢，因此我們在將自有堆棧轉換為React與Node.js時，投入了大量時間與精力以優化SSR性能。其中的一項關鍵性指標正在於頁面內「明顯位置」的渲染性能。我們發布的開源項目Electrode框架當中包含多種模塊，能夠有效提升SSR性能。感興趣的朋友可以點擊下面鏈接參閱我之前發布的各模塊助益評述。

在發布Electrode框架並強調其面向SSR的設計思路之後，我收到了大量關於SSR優勢的疑問與評論。在今天的博文中，我將專門探討使用SSR在性能層面帶來的改善效果——另外亦感謝Andrew Farmer與Patrick Hund在SEO優勢評述方面提供的協助。

首先我們將通過下面這份簡單的時間線圖展示SSR與CSR（即客戶端渲染）之間的區別。

可以看到其中最大的區別在於，在使用SSR的情況下您的伺服器對瀏覽器的響應結果屬於已做好準備並可進行渲染的頁面HTML，而CSR的瀏覽器響應結果則屬於鏈接至您JavaScript的空文檔。這意味著您的瀏覽器將立足伺服器進行HTML渲染，而無需等待全部JavaSciprt代碼的下載與執行。在這兩種情況下，我們都需要下載React並利用同樣的流程構建一個虛擬dom，而後附加各事件以實現頁面交互——但在SSR方面，用戶可在執行上述流程的同時查看到頁面內容。而在CSR方面，大家則需要等待上述流程全部執行完成，而後方可進行查看。

現在，我們來了解以下注意事項：

• 儘管在SSR方面，頁面會提前進行渲染以幫助客戶更早查看頁面內容，但在React真正執行完成之後，查看到的內容並無法進行交互。如果客戶在此期間點擊某按鈕，該操作亦需要等待React執行完成後方可起效;

• SSR TTFB（即第一位元組時間）速度比CSR更慢，因為您的伺服器需要耗費時間為頁面創建HTML，而非直接發送相對較空的響應內容;

• SSR的伺服器數據吞吐量要遠低於CSR數據通量。以React為例，這種數據吞吐量的差異將造成顯著區別。ReactDOMServer.renderToString為一項同步CPU綁定調用，其中包含該事件循環，意味著伺服器將無法在ReactDOMServer.renderToString完成之前處理其它請求。這裡我們假定您的頁面需要500毫秒進行SSR，則意味著您每秒至多只能執行2項請求。

在下圖當中，我們就walmart.com網站上的各生產應用對SSR與CSR進行渲染效果比對。

我們將三款應用（即主頁、分類與搜索）分別立足SSR與CSR方式進行比較。相關結果來自Chrome瀏覽器所捕捉到的頁面渲染時間指標。大家可能已經注意到，SSR渲染速度要更快一些，而使用CSR則意味著載入過程中瀏覽器內將顯示空白頁面。大多數使用CSR的應用都會利用載入圖標來取代這種難看的空白頁面，但由於我們在正常操作中默認使用SSR，因此在CSR測試中頁面仍保持未經發動的空白樣式。需要注意的是，上述結果皆為我們的設備在一天中特定時段內配合實際生產配置捕捉到的結果，因此經過定製化調整的方案也許在性能上有所區別——不過總體而言，其仍然足以反映一般性趨勢。

上圖為主頁、分類與搜索頁面的首次伺服器響應對比。在這裡我忽略掉了綠色指標條，因為其更多反映的是網路圖中的其它元素。這裡最值得關注的其實是文檔大小與TTFB。由於伺服器會利用HTML對頁面進行響應，因此大家可以看到SSR的文檔總是相對較大。另外需要強調的是，正如前文中所提到，CSR響應速度更快（除了主頁，這是因為受到本次測試中某些因素的影響）。

這裡再次向大家強調，上述測量指標會隨著應用類型、延遲、伺服器、位置以及多種其它變數的變化而有所浮動，因此請不要將其視為科學的客觀事實——而僅用於反映一種普遍規律。

在我們對SSR與CSR進行A/B測試時，得出了以上總體趨勢，而我們的數字也顯示儘早進行渲染往往能夠帶來更理想的操作體驗。

考慮到這些理由，我們的開源應用平台Electrode高度關注SSR。其默認啟用SSR，而我們亦構建起多種模塊以進一步提升SSR性能表現。感興趣的朋友亦可點擊此處參閱另一篇文章，我在其中展示了如何利用其中兩款模塊將RenderToString時間縮短達70%。

這裡再次感謝Mayakumar與Caoyang協助我審查並調整了本篇博文的具體內容。

原文鏈接：

區塊鏈技術與微服務架構之間有什麼關係？

今年，架構師關注的技術點有何不同？從雲計算、大數據、微服務、容器，到現在的人工智慧，架構師應該怎麼做？這裡推薦一場會議，為你總結了100+國內外技術專家現階段的架構實踐，8折即將截止，點擊「閱讀原文」，看看對你有何啟發。