传统的页面渲染只有客户端和服务端,由客户端想服务端发送url请求,服务端返回一个静态页面。整个解析过程由服务端完成,服务端解析渲染页面的优点是解析速度慢,但是用户体验不好,因为每次用户有新的请求都会重新请求服务端更新页面。
之后流行了SPA单页面,前端路由,由客户端请求服务端,服务端仅返回.html js css部分,再由客户端进行渲染页面。这样用户更新的时候不再不再刷新页面,增强了用户体验感,但是用户端渲染页面速度很慢。
· jquery+ajax创建的单页面项目可以先由浏览器渲染首页再由客户端渲染之后的页面,提高了渲染速度和用户体验感。
Vue创建的也是单页面项目,用户请求url时服务端返回一个空白的html,再由Vue渲染到页面上。
这几种方式各有优缺点,所以出现了同构渲染,由服务端先通过服务端渲染(server-side rendering,下称ssr),生成html以及初始化数据,客户端拿到代码和初始化数据后,通过对html的dom进行patch和事件绑定对dom进行客户端激活(client-side hydration,下称csh),这个整体的过程叫同构渲染,解决了客户端渲染慢以及首屏喧染慢的问题。