如今，許多網(wǎng)站都是用 JavaScript 構(gòu)建的。雖然 JavaScript 在客觀上沒有任何問題，但我們實現(xiàn)它的方式會對我們的用戶體驗和我們在搜索結(jié)果中的排名產(chǎn)生相當大的影響。開發(fā)人員不得不考慮他們的 JavaScript 如何影響 SEO，而 SEO 和其他數(shù)字營銷人員現(xiàn)在必須更多地了解他們的內(nèi)容和網(wǎng)站體驗所依賴的技術(shù)。如果您在任何一條船上，那么您來對地方了。繼續(xù)閱讀以了解客戶端渲染和服務(wù)器端渲染之間的區(qū)別，或跳轉(zhuǎn)到特定部分。

什么是客戶端渲染？

客戶端呈現(xiàn)意味著網(wǎng)站的 JavaScript 在您的瀏覽器中呈現(xiàn)，而不是在網(wǎng)站的服務(wù)器上。根據(jù) Google 的 Martin Splitt 的說法，“如果您使用 JavaScript 框架，則默認為客戶端渲染。這意味著您先發(fā)送基本的 HTML，然后再發(fā)送一段 JavaScript，然后 JavaScript 會在瀏覽器中獲取和組合內(nèi)容。”

將客戶端渲染想象成從宜家訂購家具。宜家不會把已經(jīng)組裝好的家具送到你家。相反，他們會在到達您家后將您必須組裝的零件發(fā)送給您。

客戶端渲染有什么好處？

因為呈現(xiàn)內(nèi)容的所有負擔都在客戶端（即試圖查看您的頁面的人或機器人），客戶端呈現(xiàn)是網(wǎng)站所有者更便宜的選擇，因為它減少了他們自己的服務(wù)器上的負載。這也是 JavaScript 網(wǎng)站的默認狀態(tài)，使網(wǎng)站所有者的客戶端呈現(xiàn)比服務(wù)器端呈現(xiàn)更容易。

客戶端渲染的風險是什么？

客戶端渲染有兩個主要缺點。一方面，客戶端渲染會增加用戶體驗不佳的可能性。JavaScript 可以為頁面增加幾秒鐘的加載時間，如果這種負擔完全由客戶端（網(wǎng)站訪問者）承擔，那么他們可能會感到沮喪并離開您的網(wǎng)站。

客戶端渲染的第二大缺點是它對搜索引擎機器人的影響。例如，Googlebot 有一種稱為第二波索引的東西。在這個過程中，他們首先對頁面的 HTML 進行爬網(wǎng)和索引，然后在資源可用時返回呈現(xiàn) JavaScript。這種兩階段的方法意味著有時，JavaScript 內(nèi)容可能會被遺漏，并且不會包含在 Google 的索引中。

其他搜索引擎在渲染 JavaScript 方面比谷歌差。JavaScript 還可以在搜索引擎機器人抓取網(wǎng)站時減慢它們的速度，這在大型網(wǎng)站上可能會引入抓取預算問題。

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

服務(wù)器端渲染是指網(wǎng)站的 JavaScript 在網(wǎng)站的服務(wù)器上渲染。再次使用家具示例，這就像訂購完全組裝好的到達您家的家具。

服務(wù)器端渲染有什么好處？

因為 JavaScript 在網(wǎng)站的服務(wù)器上呈現(xiàn)，所以搜索引擎機器人和人類都能獲得更快的頁面體驗。這不僅意味著更好的用戶體驗（這也是谷歌排名算法的一部分），而且還消除了與速度相關(guān)的抓取預算問題。

將完全呈現(xiàn)的頁面發(fā)送到搜索引擎機器人也意味著您不會冒客戶端呈現(xiàn)內(nèi)容可能發(fā)生的“部分索引”的風險。當 Google 和其他搜索引擎機器人嘗試訪問您的頁面時，他們無需等待渲染資源可用才能看到您的完整頁面，而是從一開始就獲得完全渲染的頁面。

服務(wù)器端渲染有哪些風險？

服務(wù)器端渲染可能是昂貴且資源密集型的。它可能很昂貴，因為為機器人和人類網(wǎng)站訪問者呈現(xiàn)內(nèi)容的全部負擔都在您的服務(wù)器上。實施它可能會占用大量資源，因為它不是 JavaScript 網(wǎng)站的默認設(shè)置，并且需要您的工程團隊的工作才能執(zhí)行。

服務(wù)器端渲染也往往不適用于第三方 JavaScript。因此，如果您使用 Bazaarvoice 之類的服務(wù)在您的網(wǎng)站上提取評論，它們將不會通過服務(wù)器端呈現(xiàn)來呈現(xiàn)。

哪個更適合 SEO、客戶端或服務(wù)器端渲染？

在這兩個選項之間，服務(wù)器端渲染比客戶端渲染更適合 SEO。這是因為服務(wù)器端渲染可以加快頁面加載時間，這不僅可以改善用戶體驗，還可以幫助您的網(wǎng)站在 Google 搜索結(jié)果中獲得更好的排名。

服務(wù)器端渲染也更適合 SEO，因為它消除了從搜索引擎機器人渲染 JavaScript 的負擔，解決了與速度相關(guān)的抓取預算問題和部分索引。但是，如果您負擔不起實現(xiàn)服務(wù)器端渲染的費用怎么辦？或者您沒有執(zhí)行它的技術(shù)資源？值得慶幸的是，還有第三種選擇。

混合渲染選項：動態(tài)渲染

動態(tài)渲染是客戶端和服務(wù)器端渲染的混合體。它是這樣工作的。當搜索引擎機器人嘗試訪問頁面時，網(wǎng)站會發(fā)送一個完全渲染的頁面。但是當一個人試圖訪問一個頁面時，他們的瀏覽器必須呈現(xiàn)該頁面。

許多人喜歡這種Google 認可的渲染選項，因為它：

• 比服務(wù)器端渲染更便宜、更容易實現(xiàn)
• 解決與速度相關(guān)的抓取預算問題
• 解決部分索引問題
• 讓人類訪問者享受 JavaScript 提供的交互性

哪些類型的網(wǎng)站需要擔心這個問題？

客戶端渲染、服務(wù)器端渲染或動態(tài)渲染之間的爭論只與使用 JavaScript 的網(wǎng)站相關(guān)。如果您的網(wǎng)站是純 HTML，則人類用戶或搜索引擎機器人不需要呈現(xiàn)任何內(nèi)容。基于 React 和 Angular 等庫構(gòu)建的完整 JavaScript 網(wǎng)站在渲染之前可能完全空白，具體取決于它們的編碼方式。

網(wǎng)站也可以是部分 JavaScript 和部分 HTML。例如，網(wǎng)站可能只依賴 JavaScript 來獲取評論（例如 Bazaarvoice）或“相關(guān)產(chǎn)品”小部件。這意味著在渲染之前只有頁面的一部分是可見的。

如果您的網(wǎng)站部分或完全依賴 JavaScript，特別是如果您的網(wǎng)站很大（即數(shù)千或數(shù)百萬頁）并且經(jīng)常更改（例如新聞出版商或產(chǎn)品周轉(zhuǎn)率高的電子商務(wù)網(wǎng)站），那么您肯定會想要仔細考慮您的渲染選項。

如何審核我的 JavaScript 網(wǎng)站是否存在 SEO 問題？

在選擇解決方案之前，最好先診斷一下您的 JavaScript 網(wǎng)站上存在哪些 SEO 問題（如果有的話）。

有幾種方法可以做到這一點：

• 使用“禁用 JavaScript”擴展— 您可以使用各種瀏覽器擴展來關(guān)閉您正在查看的網(wǎng)頁上的 JavaScript。這是查看頁面上 JavaScript 元素位置的簡單方法。如果關(guān)閉 JavaScript 后內(nèi)容或鏈接消失，則可能是 JavaScript SEO 問題。
• 對加載了 JS 的內(nèi)容進行 Google 搜索— 一旦您確定了加載了 JavaScript 的內(nèi)容，請嘗試復制其中的一些文本并將其粘貼到 Google 搜索中。如果您的網(wǎng)站沒有返回任何結(jié)果，則您可能遇到了 JavaScript SEO 問題。
• Google Search Console 的 URL 檢查工具- 通過此工具運行一個頁面，然后單擊“查看抓取的頁面”以查看 Google 呈現(xiàn)的內(nèi)容。如果缺少某些頁面內(nèi)容，則可能是 JavaScript SEO 問題。您可以使用 Google 的Rich Results Test或Mobile-Friendly Test做同樣的事情。
• 將僅 HTML 的爬網(wǎng)與啟用 JS 的爬網(wǎng)進行比較——如果您有一個支持 JavaScript 的爬蟲，如SiteCrawler，您可以在不啟用 JavaScript 的情況下爬取您的網(wǎng)站，然后在啟用 JavaScript 的情況下再次爬取。雖然其他工具允許您一次測試一個頁面，但這是獲得整個站點中 JavaScript 問題的高級視圖的好方法。