小聊： 我們都知道，以往的CSR（客戶端瀏覽器渲染）多多少少會有一點(diǎn)點(diǎn) SEO 問題，不只是 SPA（單頁面應(yīng)用程序），只不過 SPA 的 SEO 問題比較嚴(yán)重，一般的前端項(xiàng)目有很多個(gè)頁面，渲染的壓力是分散的，所以頁面渲染速度很快，基本夠爬蟲抓到很多內(nèi)容，但 SPA 只有一個(gè)頁面。而我們的 SSR （服務(wù)器渲染）可以彌補(bǔ)像 SPA 項(xiàng)目的 SEO（搜索引擎優(yōu)化） 不友好問題。但是它本身對比 CSR 也是有不足的。所以，為什么不可以結(jié)合它們兩個(gè)的優(yōu)點(diǎn)去進(jìn)行使用呢？

1. 思路

以往的 SSR 方式有很多，都是人想出來的嘛，基本思路是讓服務(wù)器提前渲染好然后等請求來的時(shí)候加渲染好的頁面直接發(fā)給客戶端瀏覽器，有人就會想，誒，這不就像 jsp 這樣的前后端不分離嘛。但 SSR 是在前后端分離的基礎(chǔ)上借用了這一思想。

現(xiàn)在已經(jīng)有了一下成熟的框架可以幫助 SPA 項(xiàng)目完美的使用 SSR 對 SEO 進(jìn)行提升，從而提高網(wǎng)站搜索排名。比如 Nuxt ，我這里會以 Nuxt 為例，對 CSR 和 SSR 的結(jié)合使用做出分析，這樣會有利與我們網(wǎng)站渲染的設(shè)計(jì)。當(dāng)然，不了解 Nuxt 也沒關(guān)系，我不會講它的使用，也不需要，我要聊的是思考后的可行性和結(jié)論。

Nuxt 有通用渲染和混合渲染的概念，簡單解釋就是提供 CSR 和 SSR 的結(jié)合使用的方案，默認(rèn)是 SSR ，你可以根據(jù)需求改成 CSR。它有 路由和 js/ts 文件可選的方案，就是說我們可以選擇哪些頁面或者文件使用 CSR。

2. 以將文件設(shè)置成CSR為例

Nuxt 會按照約定，帶有 .client 后綴的文件，會被設(shè)置成在客戶端渲染。
比如 elment-plus.ts 和 element-plus.client.ts

基于我們知道客戶端渲染（CSR）和服務(wù)端渲染（SSR）的區(qū)別，明知道 Nuxt 就是服務(wù)端渲染來進(jìn)行 SEO 的，那為什么又要提供可設(shè)置成客戶端渲染呢？那就要說到 CSR 和 SSR 的優(yōu)點(diǎn)與缺點(diǎn)了，挑重點(diǎn)說一下。

• CSR
• 優(yōu)點(diǎn)：完全由瀏覽器下載并解析 JavaScript 代碼后生成 HTML 元素，不用服務(wù)器分擔(dān)渲染壓力，同時(shí)也減少了網(wǎng)絡(luò)傳輸。
• 缺點(diǎn)：首屏加載慢，搜索引擎爬蟲在第一次嘗試索引頁面時(shí)不會等待界面完全呈現(xiàn)，不利于 SEO。
• SSR
• 優(yōu)點(diǎn)：首屏渲染快，有利于 SEO，因?yàn)闉g覽器前端初次發(fā)請求時(shí)，服務(wù)端就會把已經(jīng)渲染加載好的頁面數(shù)據(jù)發(fā)過來，節(jié)約很多時(shí)間。爬蟲也可以在沒有等待的情況下對其進(jìn)行索引。
• 缺點(diǎn)：服務(wù)器和瀏覽器環(huán)境不提供相同的 API，雙方需要保證銜接，而且會增加服務(wù)器壓力，提高它的成本。

從他們的優(yōu)缺點(diǎn)上看，我們可以綜合他們的優(yōu)缺點(diǎn)，既要 SEO 做好，又要盡量減輕服務(wù)器的壓力，把握住設(shè)置 js/ts 的渲染時(shí)機(jī)，可以讓一些部分文件在瀏覽器端渲染。這也就是——混合渲染。

那么下一個(gè)問題，應(yīng)該讓哪一些 js/ts 加上 .client 的限制呢？

3. 哪些文件使用CSR

個(gè)人理解，從以下幾點(diǎn)分析：

• 我們在 js/ts 里的代碼是做什么的？1、內(nèi)容請求渲染到 HTML 或信息交換；2、頁面交互和動(dòng)畫效果。做 SEO 爬蟲過來要的是什么？它要的是文字?jǐn)?shù)據(jù)，比如鏈接、標(biāo)題、標(biāo)簽、導(dǎo)航關(guān)鍵詞等等CSR、SSR 都可以。我們要利用瀏覽器的“免費(fèi)勞力”和服務(wù)端渲染的 SEO 友好度。
• 可以得出結(jié)論：一個(gè)前后端項(xiàng)目，這些爬蟲需要的文字內(nèi)容需要使用 js 邏輯動(dòng)態(tài)地從后臺獲取，那么絕對要在服務(wù)端渲染準(zhǔn)備好等請求的時(shí)候發(fā)過來；
• 如果是一些好看的 js 交互的樣式效果，爬蟲還沒看到就會走掉也沒關(guān)系，它不會管你頁面有多炫酷好看的，所以這樣的 js 完全可以讓瀏覽器解析加載，就比如 element-plus 的 js 配置文件，這樣有關(guān)它的渲染配置會在客戶端生效。

其實(shí) Nuxt 也還提供了路由選擇是 CSR 還是 SSR 的方式，也很容易理解，一個(gè)路由頁面要里面靜態(tài)內(nèi)容更多的話，js 請求也比較少，那么它更適合瀏覽器渲染。

Nuxt SEO這方面做得很好，當(dāng)然也不止 SEO，它不只是為了 SEO 才設(shè)計(jì)的，里面有很多方便開發(fā)、性能優(yōu)化的有趣功能。

如果對 Nuxt 感興趣的話，不妨了解它，它是基于 vue.js 的，完全支持 vue.js 語法，未來可期~。Nuxt3官網(wǎng) https://v3.nuxtjs.org/

到此這篇關(guān)于前端渲染CSR和SSR的結(jié)合使用分析的文章就介紹到這了,更多相關(guān)前端渲染CSR和SSR使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論