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 等等。