前端渲染CSR和SSR的結(jié)合使用思路詳解
小聊： 我們都知道，以往的CSR（客戶端瀏覽器渲染）多多少少會有一點點 SEO 問題，不只是 SPA（單頁面應(yīng)用程序），只不過 SPA 的 SEO 問題比較嚴(yán)重，一般的前端項目有很多個頁面，渲染的壓力是分散的，所以頁面渲染速度很快，基本夠爬蟲抓到很多內(nèi)容，但 SPA 只有一個頁面。而我們的 SSR （服務(wù)器渲染）可以彌補像 SPA 項目的 SEO（搜索引擎優(yōu)化） 不友好問題。但是它本身對比 CSR 也是有不足的。所以，為什么不可以結(jié)合它們兩個的優(yōu)點去進(jìn)行使用呢？
1. 思路
以往的 SSR 方式有很多，都是人想出來的嘛，基本思路是讓服務(wù)器提前渲染好然后等請求來的時候加渲染好的頁面直接發(fā)給客戶端瀏覽器，有人就會想，誒，這不就像 jsp 這樣的前后端不分離嘛。但 SSR 是在前后端分離的基礎(chǔ)上借用了這一思想。
現(xiàn)在已經(jīng)有了一下成熟的框架可以幫助 SPA 項目完美的使用 SSR 對 SEO 進(jìn)行提升，從而提高網(wǎng)站搜索排名。比如 Nuxt ，我這里會以 Nuxt 為例，對 CSR 和 SSR 的結(jié)合使用做出分析，這樣會有利與我們網(wǎng)站渲染的設(shè)計。當(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)點與缺點了，挑重點說一下。
- CSR
- 優(yōu)點：完全由瀏覽器下載并解析
JavaScript代碼后生成HTML元素，不用服務(wù)器分擔(dān)渲染壓力，同時也減少了網(wǎng)絡(luò)傳輸。 - 缺點：首屏加載慢，搜索引擎爬蟲在第一次嘗試索引頁面時不會等待界面完全呈現(xiàn)，不利于
SEO。 - SSR
- 優(yōu)點：首屏渲染快，有利于
SEO，因為瀏覽器前端初次發(fā)請求時，服務(wù)端就會把已經(jīng)渲染加載好的頁面數(shù)據(jù)發(fā)過來，節(jié)約很多時間。爬蟲也可以在沒有等待的情況下對其進(jìn)行索引。 - 缺點：服務(wù)器和瀏覽器環(huán)境不提供相同的
API，雙方需要保證銜接，而且會增加服務(wù)器壓力，提高它的成本。
從他們的優(yōu)缺點上看，我們可以綜合他們的優(yōu)缺點，既要 SEO 做好，又要盡量減輕服務(wù)器的壓力，把握住設(shè)置 js/ts 的渲染時機，可以讓一些部分文件在瀏覽器端渲染。這也就是——混合渲染。
那么下一個問題，應(yīng)該讓哪一些 js/ts 加上 .client 的限制呢？
3. 哪些文件使用CSR
個人理解，從以下幾點分析：
- 我們在
js/ts里的代碼是做什么的？1、內(nèi)容請求渲染到HTML或信息交換；2、頁面交互和動畫效果。做SEO爬蟲過來要的是什么？它要的是文字?jǐn)?shù)據(jù)，比如鏈接、標(biāo)題、標(biāo)簽、導(dǎo)航關(guān)鍵詞等等CSR、SSR都可以。我們要利用瀏覽器的“免費勞力”和服務(wù)端渲染的SEO友好度。 - 可以得出結(jié)論：一個前后端項目，這些爬蟲需要的文字內(nèi)容需要使用
js邏輯動態(tài)地從后臺獲取，那么絕對要在服務(wù)端渲染準(zhǔn)備好等請求的時候發(fā)過來； - 如果是一些好看的
js交互的樣式效果，爬蟲還沒看到就會走掉也沒關(guān)系，它不會管你頁面有多炫酷好看的，所以這樣的js完全可以讓瀏覽器解析加載，就比如element-plus的js配置文件，這樣有關(guān)它的渲染配置會在客戶端生效。
其實 Nuxt 也還提供了路由選擇是 CSR 還是 SSR 的方式，也很容易理解，一個路由頁面要里面靜態(tài)內(nèi)容更多的話，js 請求也比較少，那么它更適合瀏覽器渲染。
Nuxt SEO這方面做得很好，當(dāng)然也不止 SEO，它不只是為了 SEO 才設(shè)計的，里面有很多方便開發(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
鏈?zhǔn)秸{(diào)用就是調(diào)用對象的方法后返回到該對象，嚴(yán)格來講它并不屬于語法，而只是一種語法技巧，js令人著迷的一點就是這里。2010-02-02
ES6標(biāo)準(zhǔn) Arrow Function（箭頭函數(shù)=>）
ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）,為什么叫Arrow Function？因為它的定義用的就是一個箭頭2020-05-05
es6 for循環(huán)中l(wèi)et和var區(qū)別詳解
這篇文章主要介紹了es6 for循環(huán)中l(wèi)et和var區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
正如標(biāo)題所言使用js操作按下Enter焦點移至下一個控件，具體的實現(xiàn)示例如下，需要的朋友可以參考下2013-12-12
本文通過一個小小題目逐步走進(jìn)javascript 異步調(diào)用問題，本文附有解答過程，感興趣的朋友一起看看吧2017-10-10
這篇文章主要幫助大家深入理解JS綁定事件，介紹了六種JS綁定事件的情況，感興趣的小伙伴們可以參考一下2016-01-01
本文文章主要介紹了webpack5搭建一個簡易的react腳手架項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
獲取網(wǎng)頁源代碼的方法有很多，本文為大家介紹下使用JS是如何做到的，感興趣的朋友可以學(xué)習(xí)下哦2013-09-09
本篇文章主要介紹了詳解ECMAScript6入門--Class對象，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳多張圖片、刪除圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06