服务端渲染基础

本文探讨了SPA(单页面应用)的优缺点,如用户体验好、开发效率高,但首屏渲染慢且不利于SEO。同构应用通过服务端渲染首屏解决这些问题,同时保持客户端渲染的交互优势。然而,同构应用带来了额外的开发挑战和服务器负载。建议根据项目需求权衡服务端渲染的重要性及SEO需求。
摘要由CSDN通过智能技术生成
SPA单页面应用
  • 优点
    • 用户体验好、开发效率高、渲染性能好、可维护性好…
  • 缺点
    • 首屏渲染时间长,不是服务端渲染好,是js在客户端生成html
    • 不利于seo,搜索引擎爬取html内容时,单页面的html没有内容,需要js解析完才能生成网页内容
同构应用
  • 在服务端执行前端框架代码生成网页内容,返回给客户端,客户端只需负责展示
  • 通过服务端渲染首屏直出,解决spa应用首屏渲染过慢以及不利于seo的问题
  • 通过客服端渲染接管页面内容交互得到更好的用户体验
  • 这种方式通常称之为现代化的服务端渲染,也叫同构渲染
  • 这种方式构建的应用称之为服务端渲染应用或者是同构应用
渲染
  • 把数据和模板拼接到一起,本质:字符换的解析替换
传统服务端渲染
  • 网页复杂时带来的缺点
    • 前后端代码完全耦合在一起,不利于开发维护
    • 前端没有足有的发挥空间
    • 服务端压力大
    • 用户体验一般(访问每个页面都要刷新)
客户端渲染
  • ajax使得客户端动态获取数据称为可能
  • 后端负责处理数据接口
  • 前端负责将接口数据渲染到页面中
  • 前端更为独立,不在受后端限制
  • 不足
    • 首屏渲染慢
    • 不利于seo
为什么客户端渲染慢(白屏)
  • 至少需要三次http请求周期
    • 请求html
    • 请求js脚本
    • 请求数据
  • 服务端渲染加载一次html即可
现代化服务端渲染
  • 同构渲染 = 后端渲染 + 前端渲染
  • 流程
    • 基于react、vue等框架,客户端渲染和服务端渲染的结合
      • 在服务端执行一次,用于实现服务端渲染
      • 在客户端再执行一次,用于接管页面
  • 核心解决seo和首屏渲染慢的问题
  • 拥有传统服务端渲染的有点,也有客户端渲染的优点
同构渲染应用的问题
  • 开发条件所限
    • 浏览器特定的代码只能在某些生命周期钩子函数中使用
    • 一些外部扩招库可能需要特殊处理才能在服务端渲染应用中使用
    • 不能在服务渲染期间操作dom
    • 某些代码操作需要区分运行环境
  • 涉及构建设置和部署的更多要求
    • 构建:客户端渲染仅构建客户端应用即可,同构渲染需要构建两个端
    • 部署:客户端可以部署到任意的Web服务器中,同构渲染只能部署在node.js Server
  • 更多的服务器负载
    • 在node中渲染完整的应用程序,相比仅仅提供静态文件的服务器需要大量占用cpu资源
    • 如果应用在高流量环境下使用,需要准备相应的服务器负载
    • 需要更多的服务端渲染优化工作处理
  • 服务端渲染使用建议
    • 首屏渲染速度是否真的重要
    • 是否真的需要SEO
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值