服務(wù)器端渲染是什么？服務(wù)器端渲染解釋！

介紹

Web 開發(fā)的世界發(fā)生了迅速的變化。在過去的 15 年中，網(wǎng)頁已經(jīng)從簡單的 HTML 文本演變?yōu)槎嗝襟w交互體驗，將 Web 開發(fā)提升為藝術(shù)。這就像一個世紀以來從石屋到太空探索的文明。 

在此期間，Web 開發(fā)的兩個最重要的進步是采用 JavaScript 框架來構(gòu)建網(wǎng)頁和搜索引擎優(yōu)化領(lǐng)域。

具有諷刺意味的是，JavaScript 開發(fā)和 SEO 經(jīng)常相互矛盾。JavaScript 使網(wǎng)站使用起來既有趣又有趣，而 SEO 則使人們首先可以找到它們。

創(chuàng)建服務(wù)器端渲染 (SSR) 是為了使它們都成為可能。請繼續(xù)閱讀以了解什么是 SSR、您為什么應(yīng)該關(guān)心以及如何為自己使用它。

什么是 SSR？

服務(wù)器端渲染 (SSR) 是一種在您自己的服務(wù)器上加載您網(wǎng)站的 JavaScript 的方法。當人類用戶或搜索引擎網(wǎng)絡(luò)爬蟲（如 Googlebot）請求頁面時，內(nèi)容讀取為靜態(tài) HTML 頁面。

從歷史上看，搜索引擎很難抓取使用 JavaScript 而不是 HTML 制作的網(wǎng)站并為其編制索引。

Google 使用兩波索引系統(tǒng)為基于 JavaScript 的網(wǎng)頁編制索引。當 Googlebot 首次遇到您的網(wǎng)站時，它通常會在幾個小時內(nèi)抓取您的網(wǎng)頁并提取所有 HTML、CSS 和鏈接。

然后，Google 將 JavaScript 內(nèi)容放入隊列中，在有資源時呈現(xiàn)它。有時這需要幾天或幾周的時間。在此期間，您的網(wǎng)頁未編入索引，因此無法在 Google 上找到。你錯過了很多流量。 

更糟糕的是，如果您的 JavaScript 頁面無法正確抓取和編入索引，Google 會將它們作為空白屏幕讀取并相應(yīng)地對其進行排名，這可能對您網(wǎng)站的 SEO 健康造成災(zāi)難性的影響。

Google 聲稱 Googlebot 能夠很好地抓取基于 Javascript 的網(wǎng)頁并將其編入索引，但這尚未得到證實。其他搜索引擎如 Bing、Yandex 和 DuckDuckGo 根本無法抓取 JavaScript。

無論搜索引擎如何，JavaScript 都會出現(xiàn)問題，因為它需要額外的處理能力來抓取和索引，從而消耗掉您網(wǎng)站分配的更多抓取預(yù)算。

SSR 就是為這個問題而設(shè)計的。它在您自己的服務(wù)器上呈現(xiàn) JavaScript，而不是將負擔放在用戶代理上，從而在請求時快速且輕松地訪問內(nèi)容。

什么是客戶端渲染以及它與服務(wù)器端渲染有何不同？

客戶端渲染 (CSR) 是 SSR 的日益流行的替代方案。兩者之間的區(qū)別類似于從 Blue Apron 或 Green Chef 等服務(wù)訂購準備好的餐包，或者購買所有食材并自己制作餐點。 

客戶端渲染在用戶瀏覽器中加載網(wǎng)站的 JavaScript，而不是網(wǎng)站的服務(wù)器。它正在訂購準備好的餐包。  

使用 Angular、React 和 Vue 等前端 JavaScript 框架構(gòu)建的網(wǎng)站都默認使用 CSR。從 SEO 的角度來看，這是有問題的，因為當網(wǎng)絡(luò)爬蟲遇到您網(wǎng)站上的頁面時，他們看到的只是一個空白屏幕。 

同時，服務(wù)器端渲染是更傳統(tǒng)的選擇；它是買雜貨和自己做飯。它會在您網(wǎng)站的服務(wù)器上加載您的 JavaScript 內(nèi)容。 

SSR 可以追溯到 JavaScript 和 PHP 主要是后端技術(shù)的時代，Java 只是用來使基于 HTML 的網(wǎng)站更具交互性，而不是從頭開始構(gòu)建它們。 

SSR 將您的 HTML 文件轉(zhuǎn)換為用戶端瀏覽器可讀的信息。Googlebot 可以在沒有 JavaScript 的情況下查看您網(wǎng)頁上的基本 HTML 內(nèi)容，而用戶則可以看到完全呈現(xiàn)的頁面。您的網(wǎng)站在 Google 上的排名是正確的，您的用戶將獲得一種視覺和聽覺盛宴的網(wǎng)絡(luò)體驗。

服務(wù)端渲染的優(yōu)勢

我們已經(jīng)討論了服務(wù)器端渲染的一些 SEO 優(yōu)勢：完美地抓取和索引 JavaScript 頁面，不再浪費抓取預(yù)算或搜索排名直線下降，沒有緩慢的兩波索引過程；只是流暢、無縫的索引編制以及隨之而來的源源不斷的 Google 流量。

SSR比上面的有更多的優(yōu)勢。 

它為社交媒體優(yōu)化網(wǎng)頁，而不僅僅是搜索引擎。當有人在 Facebook 或 Twitter 上分享您的頁面時，該帖子會包含該頁面的預(yù)覽。

它具有許多性能優(yōu)勢，可以改善您網(wǎng)站的用戶體驗。SSR 頁面具有更快的加載時間和更快的首次內(nèi)容繪制，因為內(nèi)容可以更快地在瀏覽器中可用。這意味著您的用戶需要查看加載屏幕的時間更少。 

JavaScript 是資源密集型和代碼密集型的。使用 CSR 將其下載到瀏覽器會顯著增加頁面重量。單個 JavaScript 文件平均約為 1MB，而 Web 開發(fā)最佳實踐建議將整個頁面保持在最大 5MB 以內(nèi)。 

SSR 帶來的性能增強也有其自身的 SEO 優(yōu)勢。  

谷歌對頁面加載速度最快的網(wǎng)站給予優(yōu)先搜索排名。更快的加載時間可以改善用戶指標，例如會話持續(xù)時間和跳出率；Google 算法會查看這些指標，并為您提供額外的 SEO 提升。

更快的網(wǎng)頁?？鞓返乃阉饕??？鞓返挠脩?。

服務(wù)器端渲染缺點

如果 SSR 在技術(shù)上更加優(yōu)化且對 SEO 友好，為什么不是所有網(wǎng)站都使用它？

事實證明，為您的網(wǎng)站使用 SSR 確實有一些明顯的缺點。它昂貴，難以實施，并且需要大量人力來設(shè)置。它還增加了在您自己的服務(wù)器上呈現(xiàn) JavaScript 內(nèi)容的負擔，這將增加您的服務(wù)器維護成本。

使用 JavaScript 框架的網(wǎng)站需要通用庫來啟用 SSR；Angular 需要 Angular Universal，React 和 Vue 需要 Next.JS。所有這些都需要您的工程團隊進行額外的工作，這需要您花錢。

SSR 頁面將具有更高的 TTFB 延遲和更慢的交互時間。您的用戶會更快地看到內(nèi)容，但如果他們點擊某些內(nèi)容，則什么也不會發(fā)生。他們會感到沮喪并離開。

SSR 不是萬能的解決方案。在實施之前，您需要評估網(wǎng)站的技術(shù)需求和挑戰(zhàn)。