文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-12-22 15:00

关注

小聊: 我们都知道,以往的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使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯