javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端渲染CSR和SSR使用

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

作者:白忆宇

以往的 SSR 方式有很多,都是人想出来的嘛,基本思路是让服务器提前渲染好然后等请求来的时候加渲染好的页面直接发给客户端浏览器,这篇文章主要介绍了前端渲染CSR和SSR的结合使用分析,需要的朋友可以参考下

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

1. 思路

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

现在已经有了一下成熟的框架可以帮助 SPA 项目完美的使用 SSRSEO 进行提升,从而提高网站搜索排名。比如 Nuxt ,我这里会以 Nuxt 为例,对 CSRSSR 的结合使用做出分析,这样会有利与我们网站渲染的设计。当然,不了解 Nuxt 也没关系,我不会讲它的使用,也不需要,我要聊的是思考后的可行性和结论。

Nuxt 有通用渲染和混合渲染的概念,简单解释就是提供 CSRSSR 的结合使用的方案,默认是 SSR ,你可以根据需求改成 CSR。它有 路由和 js/ts 文件可选的方案,就是说我们可以选择哪些页面或者文件使用 CSR

2. 以将文件设置成CSR为例

Nuxt 会按照约定,带有 .client 后缀的文件,会被设置成在客户端渲染。
比如 elment-plus.tselement-plus.client.ts

基于我们知道客户端渲染(CSR)和服务端渲染(SSR)的区别,明知道 Nuxt 就是服务端渲染来进行 SEO 的,那为什么又要提供可设置成客户端渲染呢?那就要说到 CSRSSR 的优点与缺点了,挑重点说一下。

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

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

3. 哪些文件使用CSR

个人理解,从以下几点分析:

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

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

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

到此这篇关于前端渲染CSR和SSR的结合使用分析的文章就介绍到这了,更多相关前端渲染CSR和SSR使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文