一、什么是渲染？
渲染是將代碼轉換為用戶在瀏覽器上看到的網頁。主導 Web 開發的兩種突出渲染技術是 SSR 和 CSR。
頁面的渲染流程：
瀏覽器通過請求得到一個HTML文本
渲染進程解析HTML文本，構建DOM樹
解析HTML的同時，如果遇到內聯樣式或者樣式腳本，則下載并構建樣式規則（stytle rules），若遇到JavaScript腳本，則會下載執行腳本。
DOM樹和樣式規則構建完成之后，渲染進程將兩者合并成渲染樹（render tree）
渲染進程開始對渲染樹進行布局，生成布局樹（layout tree）
渲染進程對布局樹進行繪制，生成繪制記錄
渲染進程的對布局樹進行分層，分別柵格化每一層，并得到合成幀
渲染進程將合成幀信息發送給GPU進程顯示到頁面中
二、什么是服務器端渲染SSR?
SSR 的渲染過程發生在服務器上，服務器生成頁面的 HTML 并將其發送到瀏覽器，使其完全成型并準備好呈現。這樣可以加快加載時間并改善搜索引擎優化。
三、什么是客戶端渲染CSR？
CSR 的渲染過程發生在客戶端，使用 CSR，服務器的唯一職責是提供空白 HTML 文件。之后，瀏覽器處理剩余的渲染過程。應用程序的代碼被發送到用戶的瀏覽器，并在瀏覽器中進行處理以創建頁面。這可以縮短交互過程中的響應時間。
服務器端渲染 (SSR) 和客戶端渲染 (CSR) 是處理網頁的 HTML、CSS 和 JavaScript 以使其可查看的兩種方式，主要區別在于內容的渲染位置。
就類似于服務器端渲染就像是拿到了完成的蛋糕，而客戶端渲染就像是拿到了制作蛋糕的原材料，然后你去烘烤。
四、SSR對谷歌SEO的影響：
更快的初始頁面加載速度：
SSR 可以顯著縮短首字節加載時間 (TTFB)，從而更快地向用戶提供內容。這對于 SEO 和互聯網連接速度較慢的用戶尤其有利。
2. 有利于SEO 優化：
搜索引擎可以更輕松地抓取和索引 SSR 頁面，因為內容已經根據他們的請求編譯成 HTML。
3. 社交媒體分享：
在社交媒體上分享鏈接時，SSR 可確保元數據（如圖像和描述）正確加載并顯示在預覽中，從而增強參與度。
五、CSR對于谷歌SEO的影響：
1. SEO 難度增加：?
對于搜索引擎來說，客戶端渲染頁面對于爬蟲的識別和抓取相對較為復雜，可能導致搜索引擎在索引頁面內容時遇到困難，降低頁面的收錄率。
它會使搜索引擎更難抓取和索引網站上的內容。這是因為搜索引擎依靠抓取和索引網頁的 HTML 代碼來理解和排名網站上的內容。
2. 網站可能被谷歌懲罰：
谷歌在抓取網頁后，會將網頁放置到渲染隊列中等待幾秒或者更長的時間，以使頁面的 JS 能夠執行，用來使頁面呈現最終在用戶頁面應該呈現的內容。但是，如果谷歌首次看到的html源代碼與最終渲染內容有較大差異，谷歌將會判定為作弊行為，將會對網站進行排序降權或者移除。當然后續渲染與源代碼類似，谷歌會判定此內容調整屬于網站正常行為。在進行服務器端渲染時最終渲染結果應盡可能和客戶端最終呈現內容保持一致。
3. 客戶端渲染有時會導致搜索引擎索引重復內容：
當相同的內容顯示在具有不同 URL 的多個頁面上，但內容實際上相同時，就會發生這種情況。如果谷歌抓取多個頁面網址的內容是一樣的，會被認為重復內容，很有可能被減分。
4. 首次加載時間較長：
客戶端渲染通常需要在瀏覽器中執行 JavaScript 代碼來生成頁面內容，可能導致頁面首次加載時間較長，影響用戶體驗和搜索引擎的評價。
六、對于SEO來說，是選擇客戶端渲染還是服務器端渲染？
如果網站耗費谷歌大量的資源去理解你頁面的真實內容，谷歌也會降權，畢竟谷歌分配給網站的抓取資源量是有限的。如果你讓谷歌在源代碼里就能知曉頁面的所有頁面，減輕抓取資源，它就會獎勵你，給你更快的收錄和排名。
何時使用 SSR：
1. 對于著陸頁或內容豐富的網站，SEO 是優先考慮的因素。
2. 當針對網絡連接較慢的用戶時，確保他們能夠快速收到內容。
3. 在社交媒體共享是您的策略關鍵部分的網站上。
何時不使用 SSR：
1. 對于實時用戶交互和動態更新頻繁的應用程序，例如具有實時聊天功能的 Web 應用程序。
2. 當開發團隊缺乏處理 SSR 復雜性的專業知識（包括安全性和緩存策略）時。
3. 如果服務器資源有限或擔心成本，CSR 可能是一個更經濟的選擇。
七、社區評論：
八、以下是一些技術和方法可以改善客戶端渲染的 SEO：
預渲染（Prerendering）
預渲染是指在服務器端生成客戶端渲染的靜態 HTML 版本，并將其提供給搜索引擎爬蟲。這樣可以確保搜索引擎能夠獲取到完整的頁面內容，提高頁面的索引率。
服務端渲染（SSR-Server-Side Rendering）
在客戶端渲染的基礎上，可以使用服務端渲染來生成頁面的初始 HTML 內容，讓搜索引擎能夠更好地理解和索引頁面內容。
2. 合理使用 AJAX 和動態加載
如果網站采用 AJAX 或其他動態加載技術，確保網頁內容在不同狀態下都能被搜索引擎爬蟲正確解析。使用合適的標記語言和技術來標記動態內容。
3. 利用網站地圖（Sitemap）
創建并提交網站地圖可以幫助搜索引擎了解站點結構和頁面層次，從而更好地索引網站內容。
4. 使用結構化數據（Schema Markup）
結構化數據可以幫助搜索引擎理解頁面內容，提高搜索結果的豐富度和可視性。
5. 優化頁面加載速度：
快速加載頁面對 SEO 至關重要。優化圖片、腳本和樣式表的加載，減少不必要的請求，以提高頁面加載速度。
6. 避免使用純 JavaScript 導航：
如果網站采用純 JavaScript 導航，搜索引擎爬蟲可能無法正確索引網站內容。確保網站導航和鏈接可以被爬蟲訪問。
九、擴充：
哪種類型的渲染最適合你？
服務器端渲染非常適合靜態網站，而客戶端渲染更適合動態網站。
如果 SEO 對您的網站很重要，那么服務器端渲染和預渲染是兩種可能。
如果您正在構建不依賴 SEO 的 Web 應用程序，那么客戶端渲染是最佳選擇。
SSR 和 CSR 的主要區別是什么？
服務器端渲染和客戶端渲染之間的主要區別在于網站內容的渲染位置。使用 SSR，內容在服務器上渲染，而使用 CSR，內容在用戶的瀏覽器中渲染。
預渲染起什么作用？
使用預渲染，技術會在服務器上渲染網站的部分內容 — 通常是影響 SEO 結果的部分，例如元標記和元描述。這種方法還用于立即向網站用戶顯示部分內容，以便他們了解網站正在加載并且不會離開。
參考資料：https://marketbrew.ai/client-side-rendering-and-seo-the-complete-guide
文章為作者獨立觀點，不代表DLZ123立場。如有侵權,請聯系我們。( 版權為作者所有，如需轉載，請聯系作者 )
網站運營至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接，特地開通了獨立站交流群。
群里有不少運營大神，不時會分享一些運營技巧，更有一些資源收藏愛好者不時分享一些優質的學習資料。
現在可以掃碼進群，備注【加群】。 ( 群完全免費，不廣告不賣課！)
