前端渲染CSR和SSR的结合使用分析

Myth丶恋晨 2024-04-24 14:45 53阅读 0赞

> **小聊：** 我们都知道，以往的`CSR`（客户端浏览器渲染）多多少少会有一点点 `SEO` 问题，不只是 `SPA`（单页面应用程序），只不过 `SPA` 的 `SEO` 问题比较严重，一般的前端项目有很多个页面，渲染的压力是分散的，所以页面渲染速度很快，基本够爬虫抓到很多内容，但 `SPA` 只有一个页面。而我们的 `SSR` （服务器渲染）可以弥补像 `SPA` 项目的 `SEO`（搜索引擎优化） 不友好问题。但是它本身对比 `CSR` 也是有不足的。所以，为什么不可以结合它们两个的优点去进行使用呢？

#### 1. 思路 ####

以往的 `SSR` 方式有很多，都是人想出来的嘛，基本思路是让服务器提前渲染好然后等请求来的时候加渲染好的页面直接发给客户端浏览器，有人就会想，诶，这不就像 `jsp` 这样的前后端不分离嘛。但 `SSR` 是在前后端分离的基础上借用了这一思想。

现在已经有了一下成熟的框架可以帮助 `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）的区别，明知道 `Nuxt` 就是服务端渲染来进行 `SEO` 的，那为什么又要提供可设置成客户端渲染呢？那就要说到 `CSR` 和 `SSR` 的优点与缺点了，挑重点说一下。

*  CSR
    
     *  优点：完全由浏览器下载并解析 `JavaScript` 代码后生成 `HTML` 元素，不用服务器分担渲染压力，同时也减少了网络传输。
     *  缺点：首屏加载慢，搜索引擎爬虫在第一次尝试索引页面时不会等待界面完全呈现，不利于 `SEO`。
 *  SSR
    
     *  优点：首屏渲染快，有利于 `SEO`，因为浏览器前端初次发请求时，服务端就会把已经渲染加载好的页面数据发过来，节约很多时间。爬虫也可以在没有等待的情况下对其进行索引。
     *  缺点：服务器和浏览器环境不提供相同的 `API`，双方需要保证衔接，而且会增加服务器压力，提高它的成本。

从他们的优缺点上看，我们可以综合他们的优缺点，既要 `SEO` 做好，又要尽量减轻服务器的压力，把握住设置 `js/ts` 的渲染时机，可以让一些部分文件在浏览器端渲染。这也就是——混合渲染。

那么下一个问题，应该让哪一些 `js/ts` 加上 `.client` 的限制呢？

#### 3. 哪些文件使用CSR ####

个人理解，从以下几点分析：

*  我们在 `js/ts` 里的代码是做什么的？1、内容请求渲染到 `HTML` 或信息交换；2、页面交互和动画效果。
 *  做 `SEO` 爬虫过来要的是什么？它要的是文字数据，比如链接、标题、标签、导航关键词等等
 *  `CSR`、`SSR` 都可以。我们要利用浏览器的“免费劳力”和服务端渲染的 `SEO` 友好度。

可以得出结论：一个前后端项目，这些爬虫需要的文字内容需要使用 `js` 逻辑动态地从后台获取，那么绝对要在服务端渲染准备好等请求的时候发过来；如果是一些好看的 `js` 交互的样式效果，爬虫还没看到就会走掉也没关系，它不会管你页面有多炫酷好看的，所以这样的 `js` 完全可以让浏览器解析加载，就比如 `element-plus` 的 `js` 配置文件，这样有关它的渲染配置会在客户端生效。

其实 `Nuxt` 也还提供了路由选择是 `CSR` 还是 `SSR` 的方式，也很容易理解，一个路由页面要里面静态内容更多的话，js 请求也比较少，那么它更适合浏览器渲染。

Nuxt SEO这方面做得很好，当然也不止 `SEO`，它不只是为了 `SEO` 才设计的，里面有很多方便开发、性能优化的有趣功能。

如果对 `Nuxt` 感兴趣的话，不妨了解它，它是基于 `vue.js` 的，完全支持 `vue.js` 语法，未来可期~。[Nuxt3官网][Nuxt3] https://v3.nuxtjs.org/

#### 随笔 ####

![在这里插入图片描述][f715223c67fb46949832699bebf95720.jpeg_pic_center]

[Nuxt3]: https://v3.nuxtjs.org/
[f715223c67fb46949832699bebf95720.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/25b03a29c4ad4fcfafeab8d36a496207.jpeg