前言
不过多讲述SSR，可参考 https://github.com/yacan8/blog/issues/30
可以简单总结一下
服务端渲染就是前后端未分离那个时代，（JSP ？）其实就是服务端渲染，一个请求过去后端为我们拼接好html传递给浏览器，仅此而已。但是如今的服务端渲染变成了，一个请求过去，node端或其他，运行一遍（同构代码），请求真正的服务接口返回数据再渲染好后返回给浏览器，其他的事件、路由、等等浏览器还是该执行执行，
分享两张图
image.png
image.png
看起来可能很简单，但是实践呢？
Vue官方文档中只提供了非常简短的一个引子，要实现和vue深度结合的ssr还是需要站在巨人的肩膀上，这便是今天的主角。
简介
Nuxt.js 是一个基于 Vue.js 的第三方开源服务端渲染应用框架
它可以帮我们轻松的实现同构应用
不要有心智负担，他就是个集成的大号‘vue’
Nuxt.js 集成了
- Vue.js
- Vue Router
- Vuex
- Vue Server Renderer
关注点：
- asyncData
- 没有main.js
- head
目录结构
注意：nuxt是不像vue有一个main.js核心入口文件的，他的所有功能区分都是像以下目录来做
├── layouts 布局
├── pages 页面组件，自动生成对应的路由配置
├── store 即vuex
├── assets 需要被 webpack来编译处理的
├── static 不需要处理的静态文件
├── middleware 中间件，在页面渲染之前执行
├── plugins 运行vue之前，执行插件，如axios啥的，跟vue一样use，另外还有个是模块，是nuxt核心功能的拓展，可以理解为比plugin更方便使用的多插件集合
├── nuxt.config.js
├── components 不会被拓展的vue component
拓展
image.png
asyncData
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，我们可以在设置组件的数据之前能异步获取或处理数据。类似created和mounted，但是这是服务端渲染，同一个代码会在两端跑，所以准确说调用时机是：服务端渲染期间和客户端路由更新之前
注意的是：
请求服务端 -> 服务端开始执行vue -> 请求asyncData的接口 -> 返回拼接好的html，vuejs，-> 客户端进行渲染 -> 客户端不再请求asyncData的接口 -> 因为客户端运行的vuejs已经通过nuxt在服务端把请求到的数据嵌了进去
在服务端会真的跑请求数据，但是在客户端是不会再跑一遍
image.png
async参数
image.png
Head
Nuxt.js 使用了 拓展来 更新的 html的属性或者html的<head>标签
image.png
场景：
想在客户端首次渲染完成，监听到一张图片onload时进行一些操作，但此时vue相关js并没有完成
下载，生命周期无法执行，该如何？
打包
image.png
先npm run build
image.png
image.png
image.png
然后 npm run start，然后服务会启动，监听一个配置了的端口，然后服务启动，当浏览器访问的时候就可以有下一步操作，
image.png
webpack将 隐藏文件.nuxt 资源 打包出两块代码文件：
其中 Server Bundle用于服务端渲染，服务端通过渲染器 bundleRenderer 将 bundle 生成html片段；
而 Client Bundle 用于客户端渲染，跳转，交互啊，还有数据处理还是需要浏览器执行 Client Bundle 来完成
我们的主角asyncData()就是在上图中Node Server中处理
注意：
用户通过浏览器访问Vue页面时，都是一个全新的上下文。但是在服务端，应用启动后就一直在运行着，处理每一个用户请求都是在同一个上下文中。为了不串数据，每次SSR请求都创建全新的app、store、router。
网友评论