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

什么是客戶端渲染？

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

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

客戶端渲染有什么好處？

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

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

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

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

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

什么是服務器端渲染？

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

服務器端渲染有什么好處？

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

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

服務器端渲染有哪些風險？

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

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

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

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

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

混合渲染選項：動態渲染

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

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

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

哪些類型的網站需要擔心這個問題？

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

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

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

如何審核我的 JavaScript 網站是否存在 SEO 問題？

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

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

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