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

1. 思路

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

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

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

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

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

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

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

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

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

3. 哪些文件使用CSR

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

• 我們?cè)?js/ts 里的代碼是做什么的？1、內(nèi)容請(qǐng)求渲染到 HTML 或信息交換；2、頁(yè)面交互和動(dòng)畫效果。做 SEO 爬蟲過(guò)來(lái)要的是什么？它要的是文字?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)地從后臺(tái)獲取，那么絕對(duì)要在服務(wù)端渲染準(zhǔn)備好等請(qǐng)求的時(shí)候發(fā)過(guò)來(lái)；
• 如果是一些好看的 js 交互的樣式效果，爬蟲還沒(méi)看到就會(huì)走掉也沒(méi)關(guān)系，它不會(huì)管你頁(yè)面有多炫酷好看的，所以這樣的 js 完全可以讓瀏覽器解析加載，就比如 element-plus 的 js 配置文件，這樣有關(guān)它的渲染配置會(huì)在客戶端生效。

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

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

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

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

最新評(píng)論