前端渲染CSR和SSR的结合使用思路详解

2022-12-22 15:00

短信预约 -IT技能 免费直播动态提醒

小聊： 我们都知道，以往的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 配置文件，这样有关它的渲染配置会在客户端生效。