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