Vue服务器端渲染
2017-12-14 18:44:33 12 举报AI智能生成
Vue服务端渲染学习整理的思维导图，后期会继续追加自己的理解
作者其他创作
大纲/内容
Vue SSR
什么是服务器端渲染
优势
更好的SEO
更快的内容到达
开发条件所限：针对特定生命周期钩子函数的代码和一些外部扩展库
涉及更多的构建和部署要求
更多的服务器端负载，可能需要考虑缓存策略，准备一些服务器负载机制
权衡点
为什么使用服务器端渲染
指南
需要注意的问题
服务器数据响应希望每个请求是独立的全新的，不互相污染
beforeCreated
created
要注意组件生命周期钩子函数的使用
不接受访问特定平台的API，比如window/document
如何编写通用代码
避免状态单例，否则状态将在每个传入的请求间共享
要区分服务器端和客户端构建
路由和代码分割
要区分服务器逻辑和客户端逻辑
注意事项
构建步骤
源码结构
在服务器开始渲染前，需要先预取和解析好一些所需的异步数据
是什么
使用Vuex进行数据状态管理
用什么
在路由导航之前解析数据
匹配要渲染的视图后，再获取数据
客户端数据预取
服务端数据预取
store代码拆分
怎么用
数据预取和状态
客户端混合
{ createBundleRenderer } = require('vue-server-renderer')
Bundle Renderer
扩展说明：external
服务器配置
生成clientManifest：客户端构建清单
手动资源注入
客户端配置
构建配置
推荐简单的使用*.vue单文件组件内的<style>
客户端和服务端通用的编程体验
使用bundleRenderer时自动注入关键css
支持使用extract-text-webpack-plugin进行通用css提取
使用vue-loader的extractCSS选项从*.vue文件中提取css
启动css提取
在服务端构建过程中，不应该外置化提取
子主题如果使用 CSS 提取 + 使用 CommonsChunkPlugin 插件提取 vendor，在 extract-text-webpack-plugin 提取 CSS 到 vendor chunk 时将遇到问题。为了应对这个问题，请避免在 vendor chunk 中包含 CSS 文件
注意
从依赖模块导入样式
用法配置点
使用vue-style-loader能满足服务端渲染的特殊功能
css管理
类似于资源注入，通过模版占位符和追加到渲染上下文的动态数据渲染head
head管理
父节点
micro-caching
页面级别缓存
用什么缓存
serverCacheKey
LRU
要注意小心使用组件缓存来解决性能瓶颈
组件具有可能依赖于全局状态的子组件
组件具有对渲染上下文产生副作用的子组件
两种情况不应该使用组件缓存
适用于组件缓存的最常见类型的组件，是在v-for列表中重复出现的组件
何时使用
组件级缓存
缓存
会尽快发送数据，可以尽快获得\"第一个chunk\"，然后将其发送给客户端
如果你依赖由组件生命周期钩子函数填充的上下文数据，不建议使用流氏传输模式
不适用的情况
流式渲染
收藏
职业：本科
0 条评论
回复 删除
下一页
