vue ssr服务器渲染:浏览器输入url后发生了什么

主要介绍一下怎么由vue-cli应用经过修改,变成能用于服务端和客户端的通用同构代码。希望能给到新接触SSR的的同学一些指导~

1、为啥要用服务器端渲染?

与传统 SPA(Single-Page Application - 单页应用程序)相比,服务器端渲染(SSR)的优势主要在于:

更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

更快的内容到达时间(time-to-content),特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行,才显示服务器渲染的标记,所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验,并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言,服务器端渲染(SSR)至关重要。

2、没有什么只有好处没有坏处,,SSR也是,,,

1、开发复杂化。你需要更加注意同一份代码在服务器端和客户单端两种环境的执行,,你需要仔细消息各种生命周期的钩子函数,,还有一些可能服务器渲染的结果和客户端渲染不一致导致的报错等。

2、构建和部署复杂化。你需要配置和打包服务端代码,客户端代码。而且,如果你还想继续使用cdn版,你还要配置和打包非ssr版代码。部署也涉及node部署,server代码部署,cdn代码部署。

3、增加node渲染服务端负载。相对于cdn版本,ssr版增加了ssr node server,大流量时,明显需要更多的人力和技术去支撑node server这部分的工作。

平常应用中,一般需要ssr的就是首屏直出,给用户比较快的页面达到时间。其他地方对ssr需求并不是很大,,相对于ssr带来的弊端,合理权衡是很重要的事。

3、使用SSR时,输入网址 到 看到页面 是 什么个流程 ?

以开发代码为例。

▲ 服务端准备阶段(setup-dev-server.js)

1、读 index.html 模板文件,使用webpack.client.config.js打包客户端代码(额外生成了client-manifest.json清单文件),监控代码变化。

2、使用webpack.server.config.js打包服务端代码(生成server-bundle.json文件),把server-bundle文件以及上面的client-manifest.json清单文件返回给服务器server.js。监控代码变化并重新打包。 这两步凡是有代码变化,都重新打包服务端和客户端代码。

3、有bundle和manifest文件了,调用 ssr 核心库函数,renderer = createBundleRenderer(...)

4、服务端准备就绪。

▲ 服务端渲染阶段(entry-server.js)

1、一个请求过来了

2、定义一个渲染上下文 context,(可以给其赋值自定义数据),renderer(context, callback(result_html)),renderer会将context环境,传入并调用entry-server.js 暴露出来的函数。渲染完成后生成 html 传给回调,然后 res.send(html) 给客户端。结束。

3、再看下里面的渲染过程。entry-server.js 先 createApp()创建一个实例。再获取页面url,匹配router,更新路由状态:router.push(url)。等路由准备好后,加载当前路由对应component暴露出来的预加载数据钩子函数。待所有加载数据完成后,保存状态:context.state = store.state,,,这个很重要,renderer会保这个状态插入到window.__INITIAL_STATE_这个变量里。这边变量将用户客户端恢复服务器数据状态。路由、数据都准备好后,开始renderer自身的dom渲染了。 客户端manifest文件会被利用,把相关的js,css文件等插入到渲染后的html字符串里面。

▲ 客户端处理(entry-client.js)

1、客户端收到了 server res.send(html)的源码了。

2、浏览器加载完基础文件后,开始执行 entry-client.js 里的过程。先 createApp() 创建一个实例,解析服务器插入的状态window.__INITIAL_STATE_数据,替换当前store状态 store.replaceState(window.__INITIAL_STATE__),然后 挂载到 dom上,app.$mount('#app')。期间,客户端可以做一些 data prefetch工作,如:router.beforeResolve,Vue.beforeRouteUpdate 等等。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏乐百川的学习频道

Visual Studio Code介绍

应该有很多人都知道Atom编辑器吧,它是由Github开发的一个跨平台的编辑器。它使用了跨平台的Electron,用前端技术编写图形界面。一开始我也推荐过这个编...

2705
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来 前情回顾 在上一篇博文《Vue2+VueRou...

21310
来自专栏代码小睿

Atom 备份神器 —— Sync Settings

  当 Atom 的扩展越装越多,配置也越来越偏离了系统默认设置时,一旦电脑重装后需要复原开发环境,这将是一件比较头疼的事,但今天发现一个扩展,可以解决这一问题...

27210
来自专栏Wordpress专用主机|主题模板|必备插件

腾讯云服务器如何安装宝塔面板

对于很多wordpress爱好者来讲,会优先选择服务器而不是虚拟主机。毕竟服务器在性能以及可控性上很不小的优势。

2.6K10
来自专栏河湾欢儿的专栏

客户端和浏览器端交互模型

2041
来自专栏计算机编程

【vue随手笔记】Vue与ios UIwebview 和 Android webview 交互

5323
来自专栏君赏技术博客

第一次和你见面,我就深深的爱上你-Xcode Bot

最近研究起了 APP 的自动化测试,发现了 Xcode Bot自动化打包测试发布的功能,就开始研究起来。

1631
来自专栏FreeBuf

漏洞追踪:最新IE UXSS漏洞技术分析

最近David Leo在Full Disclosure上爆出了一个ie的 uxss 漏洞,可以绕过ie的同源策略。FreeBuf也有相关的报道(点我查看)。本文...

1997
来自专栏游戏杂谈

Unity设置播放模式下始终先执行指定的场景

通过我们使用Unity开发游戏,是在PC/Mac上。而一个游戏通常也会有很多的场景,比如A、B、C、D三个场景,正常流程下的执行顺序是 A –> B –> C ...

3172
来自专栏Jack-Cui

Jetson TX1开发笔记(二):TX1开发前必做的几件事

嵌入式平台: Jeston TX1     在上篇博客中,博主已经使用Jetpack3.0为Jetson TX1刷了最新的系统。但是,在开发前,个人感觉有几个...

2866

扫码关注云+社区