免費(fèi)AI編程助手
介紹
Web 開(kāi)發(fā)的世界發(fā)生了迅速的變化。在過(guò)去的 15 年中，網(wǎng)頁(yè)已經(jīng)從簡(jiǎn)單的 HTML 文本演變?yōu)槎嗝襟w交互體驗(yàn)，將 Web 開(kāi)發(fā)提升為藝術(shù)。這就像一個(gè)世紀(jì)以來(lái)從石屋到太空探索的文明。
在此期間，Web 開(kāi)發(fā)的兩個(gè)最重要的進(jìn)步是采用 JavaScript 框架來(lái)構(gòu)建網(wǎng)頁(yè)和搜索引擎優(yōu)化領(lǐng)域。
具有諷刺意味的是，JavaScript 開(kāi)發(fā)和 SEO 經(jīng)常相互矛盾。JavaScript 使網(wǎng)站使用起來(lái)既有趣又有趣，而 SEO 則使人們首先可以找到它們。
創(chuàng)建服務(wù)器端渲染 (SSR) 是為了使它們都成為可能。請(qǐng)繼續(xù)閱讀以了解什么是 SSR、您為什么應(yīng)該關(guān)心以及如何為自己使用它。
什么是 SSR？
服務(wù)器端渲染 (SSR) 是一種在您自己的服務(wù)器上加載您網(wǎng)站的 JavaScript 的方法。當(dāng)人類(lèi)用戶(hù)或搜索引擎網(wǎng)絡(luò)爬蟲(chóng)（如 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è)未編入索引，因此無(wú)法在 Google 上找到。你錯(cuò)過(guò)了很多流量。
更糟糕的是，如果您的 JavaScript 頁(yè)面無(wú)法正確抓取和編入索引，Google 會(huì)將它們作為空白屏幕讀取并相應(yīng)地對(duì)其進(jìn)行排名，這可能對(duì)您網(wǎng)站的 SEO 健康造成災(zāi)難性的影響。
Google 聲稱(chēng) Googlebot 能夠很好地抓取基于 Javascript 的網(wǎng)頁(yè)并將其編入索引，但這尚未得到證實(shí)。其他搜索引擎如 Bing、Yandex 和 DuckDuckGo 根本無(wú)法抓取 JavaScript。
無(wú)論搜索引擎如何，JavaScript 都會(huì)出現(xiàn)問(wèn)題，因?yàn)樗枰~外的處理能力來(lái)抓取和索引，從而消耗掉您網(wǎng)站分配的更多抓取預(yù)算。
SSR 就是為這個(gè)問(wèn)題而設(shè)計(jì)的。它在您自己的服務(wù)器上呈現(xiàn) JavaScript，而不是將負(fù)擔(dān)放在用戶(hù)代理上，從而在請(qǐng)求時(shí)快速且輕松地訪(fǎng)問(wèn)內(nèi)容。
什么是客戶(hù)端渲染以及它與服務(wù)器端渲染有何不同？
客戶(hù)端渲染 (CSR) 是 SSR 的日益流行的替代方案。兩者之間的區(qū)別類(lèi)似于從 Blue Apron 或 Green Chef 等服務(wù)訂購(gòu)準(zhǔn)備好的餐包，或者購(gòu)買(mǎi)所有食材并自己制作餐點(diǎn)。
客戶(hù)端渲染在用戶(hù)瀏覽器中加載網(wǎng)站的 JavaScript，而不是網(wǎng)站的服務(wù)器。它正在訂購(gòu)準(zhǔn)備好的餐包。
使用 Angular、React 和 Vue 等前端 JavaScript 框架構(gòu)建的網(wǎng)站都默認(rèn)使用 CSR。從 SEO 的角度來(lái)看，這是有問(wèn)題的，因?yàn)楫?dāng)網(wǎng)絡(luò)爬蟲(chóng)遇到您網(wǎng)站上的頁(yè)面時(shí)，他們看到的只是一個(gè)空白屏幕。
同時(shí)，服務(wù)器端渲染是更傳統(tǒng)的選擇；它是買(mǎi)雜貨和自己做飯。它會(huì)在您網(wǎng)站的服務(wù)器上加載您的 JavaScript 內(nèi)容。
SSR 可以追溯到 JavaScript 和 PHP 主要是后端技術(shù)的時(shí)代，Java 只是用來(lái)使基于 HTML 的網(wǎng)站更具交互性，而不是從頭開(kāi)始構(gòu)建它們。
SSR 將您的 HTML 文件轉(zhuǎn)換為用戶(hù)端瀏覽器可讀的信息。Googlebot 可以在沒(méi)有 JavaScript 的情況下查看您網(wǎng)頁(yè)上的基本 HTML 內(nèi)容，而用戶(hù)則可以看到完全呈現(xiàn)的頁(yè)面。您的網(wǎng)站在 Google 上的排名是正確的，您的用戶(hù)將獲得一種視覺(jué)和聽(tīng)覺(jué)盛宴的網(wǎng)絡(luò)體驗(yàn)。
服務(wù)端渲染的優(yōu)勢(shì)
我們已經(jīng)討論了服務(wù)器端渲染的一些 SEO 優(yōu)勢(shì)：完美地抓取和索引 JavaScript 頁(yè)面，不再浪費(fèi)抓取預(yù)算或搜索排名直線(xiàn)下降，沒(méi)有緩慢的兩波索引過(guò)程；只是流暢、無(wú)縫的索引編制以及隨之而來(lái)的源源不斷的 Google 流量。
SSR比上面的有更多的優(yōu)勢(shì)。
它為社交媒體優(yōu)化網(wǎng)頁(yè)，而不僅僅是搜索引擎。當(dāng)有人在 Facebook 或 Twitter 上分享您的頁(yè)面時(shí)，該帖子會(huì)包含該頁(yè)面的預(yù)覽。
它具有許多性能優(yōu)勢(shì)，可以改善您網(wǎng)站的用戶(hù)體驗(yàn)。SSR 頁(yè)面具有更快的加載時(shí)間和更快的首次內(nèi)容繪制，因?yàn)閮?nèi)容可以更快地在瀏覽器中可用。這意味著您的用戶(hù)需要查看加載屏幕的時(shí)間更少。
JavaScript 是資源密集型和代碼密集型的。使用 CSR 將其下載到瀏覽器會(huì)顯著增加頁(yè)面重量。單個(gè) JavaScript 文件平均約為 1MB，而 Web 開(kāi)發(fā)最佳實(shí)踐建議將整個(gè)頁(yè)面保持在最大 5MB 以?xún)?nèi)。
SSR 帶來(lái)的性能增強(qiáng)也有其自身的 SEO 優(yōu)勢(shì)。
谷歌對(duì)頁(yè)面加載速度最快的網(wǎng)站給予優(yōu)先搜索排名。更快的加載時(shí)間可以改善用戶(hù)指標(biāo)，例如會(huì)話(huà)持續(xù)時(shí)間和跳出率；Google 算法會(huì)查看這些指標(biāo)，并為您提供額外的 SEO 提升。
更快的網(wǎng)頁(yè)?？鞓?lè)的搜索引擎?？鞓?lè)的用戶(hù)。
服務(wù)器端渲染缺點(diǎn)
如果 SSR 在技術(shù)上更加優(yōu)化且對(duì) SEO 友好，為什么不是所有網(wǎng)站都使用它？
事實(shí)證明，為您的網(wǎng)站使用 SSR 確實(shí)有一些明顯的缺點(diǎn)。它昂貴，難以實(shí)施，并且需要大量人力來(lái)設(shè)置。它還增加了在您自己的服務(wù)器上呈現(xiàn) JavaScript 內(nèi)容的負(fù)擔(dān)，這將增加您的服務(wù)器維護(hù)成本。
使用 JavaScript 框架的網(wǎng)站需要通用庫(kù)來(lái)啟用 SSR；Angular 需要 Angular Universal，React 和 Vue 需要 Next.JS。所有這些都需要您的工程團(tuán)隊(duì)進(jìn)行額外的工作，這需要您花錢(qián)。
SSR 頁(yè)面將具有更高的 TTFB 延遲和更慢的交互時(shí)間。您的用戶(hù)會(huì)更快地看到內(nèi)容，但如果他們點(diǎn)擊某些內(nèi)容，則什么也不會(huì)發(fā)生。他們會(huì)感到沮喪并離開(kāi)。
SSR 不是萬(wàn)能的解決方案。在實(shí)施之前，您需要評(píng)估網(wǎng)站的技術(shù)需求和挑戰(zhàn)。
