传统渲染(URL)、客户端渲染CSR(首屏渲染等待时长;SEO不友好)
服务器端渲染SSR
后端渲染出完整的首屏的DOM结构返回
前端拿到的内容是首屏,后续的页面操作再用单页的路由跳转和渲染
Server Side Render
SSR的特点
●优点
●更利于SEO:服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScr ipt脚本的最终
HTML,网络爬虫就可以抓取到完整页面的信息。
●更利于首屏渲染:首屏渲染是node发送的html字符串,不再依赖js文件,这就会使用户更快看
到页面内容
●局限
●服务端压力较大:尤其是高并发访问的情况,会大量占用服务端CPU资源;
●项目复杂度增大,可维护性降低,DEBUG难度提高
●开发条件受限:在服务端渲染中,created和beforeCreate之外的生命周期钩子不可用
●学习成本相对较高:不仅需要熟悉webpack、 Vue,还需要掌握node、Express相关技术
SSR构建流程
●app. js入口文件
●通用的entry,用来构建Vue实例供客户端和服务端使用
●两个entry:
●server entry是服务端入口,是一个export导出的函数,负责调用组件内定义的获取数据的方法,获取到SSR渲染所需的数据,并存储到上下文环境中,它会在每一次渲染中重复调用。
●client entry是客户端入口,用来挂载Vue实例到指定的DOM元素上
●webpack打包构建
●server entry和client entry通过webpack打包,生成Server Bundle和Client Bundle
●Server Bundle