同构渲染 —客户端和服务端渲染页面

同构渲染结合了服务端渲染(SSR)和客户端渲染(CSR),解决了传统服务端渲染速度慢和客户端渲染首屏加载慢的问题。它先由服务端生成HTML和初始化数据,然后客户端接收到后进行DOM补丁和事件绑定,实现更快的页面加载和更好的用户体验。同构渲染在jQuery+AJAX和Vue等单页面应用中都有应用。
摘要由CSDN通过智能技术生成

        传统的页面渲染只有客户端和服务端,由客户端想服务端发送url请求,服务端返回一个静态页面。整个解析过程由服务端完成,服务端解析渲染页面的优点是解析速度慢,但是用户体验不好,因为每次用户有新的请求都会重新请求服务端更新页面。

        之后流行了SPA单页面,前端路由,由客户端请求服务端,服务端仅返回.html js css部分,再由客户端进行渲染页面。这样用户更新的时候不再不再刷新页面,增强了用户体验感,但是用户端渲染页面速度很慢。        

·        jquery+ajax创建的单页面项目可以先由浏览器渲染首页再由客户端渲染之后的页面,提高了渲染速度和用户体验感。

        Vue创建的也是单页面项目,用户请求url时服务端返回一个空白的html,再由Vue渲染到页面上。

 这几种方式各有优缺点,所以出现了同构渲染,由服务端先通过服务端渲染(server-side rendering,下称ssr),生成html以及初始化数据,客户端拿到代码和初始化数据后,通过对html的dom进行patch和事件绑定对dom进行客户端激活(client-side hydration,下称csh),这个整体的过程叫同构渲染,解决了客户端渲染慢以及首屏喧染慢的问题。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值