前端渲染CSR和SSR的結合使用思路詳解

更新時間：2022年12月22日 13:08:16 作者：白憶宇

以往的 SSR 方式有很多，都是人想出來的嘛，基本思路是讓服務器提前渲染好然后等請求來的時候加渲染好的頁面直接發(fā)給客戶端瀏覽器，這篇文章主要介紹了前端渲染CSR和SSR的結合使用分析,需要的朋友可以參考下

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

1. 思路

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

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

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

2. 以將文件設置成CSR為例

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

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

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

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

那么下一個問題，應該讓哪一些 js/ts 加上 .client 的限制呢？

3. 哪些文件使用CSR

個人理解，從以下幾點分析：

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