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

介紹

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

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

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

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

什么是 SSR？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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