理解vue ssr原理,自己搭建简单的ssr框架
理解vue ssr原理,自己搭建简单的ssr框架
前言
大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口。Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些高的,这工作量无异于重构前端。另外对前端的技术要求也是挺高的,需要对Vue比较熟悉,还要有Node.js 和 webpack 的应用经验。
引入
Vue是一个构建客户端应用的框架,即vue组件是在浏览器中进行渲染的。所谓服务端渲染,指的是把vue组件在服务器端渲染为组装好的HTML字符串,然后将它们直接发送到浏览器,最后需要将这些静态标记"激活"为客户端上完全可交互的应用程序。
服务端渲染的优点
- 更好的SEO,搜索引擎爬虫可以抓取渲染好的页面
- 更快的内容到达时间(首屏加载更快),因为服务端只需要返回渲染好的HTML,这部分代码量很小的,所以用户体验更好
服务端渲染的缺点
- 首先就是开发成本比较高,比如某些声明周期钩子函数(如beforeCreate、created)能同时运行在服务端和客户端,因此第三方库要做特殊处理,才能在服务器渲染应用程序中运行。
- 由于服务端渲染要用Nodejs做中间层,所以部署项目时,需要处于Node.js server运行环境。在高流量环境下,还要做好服务器负载和缓存策略
原理解析
先附上demo地址:https://github.com/wmui/vue-s...
第一步:编写entry-client.js和entry-server.js
entry-client.js只在浏览器环境下执行,所以需要显示调用$mount方法,挂载DOM节点
import Vue from 'vue';
import App from './App.vue';
import createStore from './store/index.js';function createApp() {const store = createStore();const app = new Vue({store,render: h => h(App)});return {app, store}
}const { app, store } = createApp();// 使用window.__INITIAL_STATE__中的数据替换整个state中的数据,这样服务端渲染结束后,客户端也可以自由操作state中的数据
if (window.__INITIAL_STATE__) {store.replaceState(window.__INITIAL_STATE__);
}app.$mount('#app');
entry-server.js需要导出一个函数,在服务端渲染期间会被调用
import Vue from 'vue';
import App from './App.vue';
import createStore from './store/index.js';export default function(context) {// context是上下文对象const store = createStore();let app = new Vue({store,render: h => h(App)});// 找到所有 asyncData 方法let components = App.components;let asyncDataArr = []; // promise集合for (let key in components) {if (!components.hasOwnProperty(key)) continue;let component = components[key];if (component.asyncData) {asyncDataArr.push(component.asyncData({store})) // 把store传给asyncData}}// 所有请求并行执行return Promise.all(asyncDataArr).then(() => {// context.state 赋值成什么,window.__INITIAL_STATE__ 就是什么// 这下你应该明白entry-client.js中window.__INITIAL_STATE__是哪来的了,它是在服务端渲染期间被添加进上下文的context.state = store.state;return app;});
};
上面的asyncData是干嘛用的?其实,这个函数是专门请求数据用的,你可能会问请求数据为什么不在beforeCreate
或者created
中完成,还要专门定义一个函数?虽然beforeCreate
和created
在服务端也会被执行(其他周期函数只会在客户端执行),但是我们都知道请求是异步的,这就导致请求发出后,数据还没返回,渲染就已经结束了,所以无法把 Ajax 返回的数据也一并渲染出来。因此需要想个办法,等到所有数据都返回后再渲染组件
asyncData需要返回一个promise,这样就可以等到所有请求都完成后再渲染组件。下面是在foo组价中使用asyncData的示例,在这里完成数据的请求
export default {asyncData: function({store}) {return store.dispatch('GET_ARTICLE') // 返回promise},computed: {article() {return this.$store.state.article}}
}
第二步:配置webpack
webpack配置比较简单,但是也需要针对client和server端单独配置
webpack.client.conf.js显然是用来打包客户端应用的
module.exports = merge(base, {entry: {client: path.join(__dirname, '../entry-client.js')}
});
webpack.server.conf.js用来打包服务端应用,这里需要指定node环境
module.exports = merge(base, {target: 'node', // 指定是node环境entry: {server: path.join(__dirname, '../entry-server.js')},output: {filename: '[name].js', // server.jslibraryTarget: 'commonjs2' // 必须按照 commonjs规范打包才能被服务器调用。},plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, '../index.ssr.html'),filename: 'index.ssr.html',files: {js: 'client.js'}, // client.js需要在html中引入excludeChunks: ['server'] // server.js只在服务端执行,所以不能打包到html中})]
});
第三步:启动服务
打包完成后就可以启动服务了,在start.js
中我们需要把server.js加载进来,然后通过renderToString方法把渲染好的html返回给浏览器
const bundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.js'), 'utf-8');
const renderer = require('vue-server-renderer').createBundleRenderer(bundle, {template: fs.readFileSync(path.resolve(__dirname, 'dist/index.ssr.html'), 'utf-8') // 服务端渲染数据
});server.get('*', (req, res) => {renderer.renderToString((err, html) => {// console.log(html)if (err) {console.error(err);res.status(500).end('服务器内部错误');return;}res.end(html);})
});
效果图
demo已经上传到github: http://github.com/wmui/vue-ss...
结语
个人实践Vue SSR已有一段时间,发现要想搭建一套完整的 SSR 服务框架还是很有挑战的,或许 Nuxt 是一个不错的选择,对 Nuxt 感兴趣的朋友可以参考我的一个开源小作品Essay
以上,感谢阅读!
来源:https://segmentfault.com/a/1190000017479484
理解vue ssr原理,自己搭建简单的ssr框架相关推荐
- vue前端进阶之SSR篇 --- 搭建简单的SSR框架
目录 理解ssr SSR的重要性 非SSR SSR 了解vapper 制作简易版脚手架 vue框架 环境区分 目录结构 api router views head信息 打包运行 结束 理解ssr 博主 ...
- 深入理解Vue动画原理
深入讲解 Vue 动画原理 文档 过渡 & 动画 轮播组件slides 轮播难点在于最末位到首位的切换方式,在讲轮播之前需要讲下动画. Vue动画支持很多种不同的方式. Vue动画方式1 - ...
- ssm框架 html搭建,简单的SSM框架搭建教程
简单的ssm框架的搭建和配置文件 ssm框架里边的配置: 1.src路径下直接存放数据库和log4j的properties文件 2.src路径下建个config包,分别放置ssm的xml文件 3.修改 ...
- Eclipse搭建简单的Spring框架
今天在这儿记录一下如何搭建一个简单Spring框架 一.首先需要新建一个工程(我新建的是web工程): file-->new-->other-->dynamic ** **,如图: ...
- 用锤子便签搭建简单的unittest框架
写了一个简单的小例子,能通过appium打开锤子便签,并输入"abc",通过断言检测输入的信息是否正确 用了pycharm这个IDE来编写appium,运行时需要先在命令行输入ap ...
- 搭建简单的struts2框架
1.新建动态web项目 参考:http://blog.csdn.net/zjsdrs/article/details/53426711 2.下载struts2jar 下载地址:http://strut ...
- 酷我音乐盒java_Java Swing仿“酷我音乐盒”界面,搭建简单通用前端框架
使用Java的Swing技术也可以做出很炫的界面,不过效率貌似不是很好,但是在现如今机子配置都超高的情况下,其应该是可以被接受的.. 程序截图如下: 部分代码如下: /** * */ package ...
- Vue.js 框架源码与进阶 - 搭建自己的SSR
文章目录 一.Vue SSR 介绍 1.1 Vue SSR 是什么 1.2 使用场景 1.3 如何实现 Vue SSR 二.Vue SSR 基本使用 2.1 渲染一个 Vue 实例 2.2 与服务器集 ...
- vue SSR : 原理(一)
前言: 由于vue 单页面对seo搜索引擎不支持,vue官网给了一个解决方案是ssr服务端渲染来解决seo这个问题,最近看了很多关于ssr的文章, 决定总结下: 参考博客:从0开始,搭建Vue2.0的 ...
最新文章
- 我花了10个小时,写出了这篇K8S架构解析
- 万字长文的Redis五种数据结构详解(理论+实战),建议收藏。
- 10 个免费的服务器监控工具推荐
- Spring MVC 特性实现文件下载
- mysql中文显示问号
- Appium+python的单元测试框架unittest(2)——fixtures(转)
- 线程的语法 (event,重要)
- Python 并行编程
- linux查看vnc进程命令_linux命令:VNC服务的配置及使用
- BZOJ2563 阿狸和桃子的游戏
- iOS UITextField设置起始字符开始位置
- 第一模块·开发基础-第1章 Python基础语法
- 搭建SFTP服务器实现文件上传
- C#CAD二次开发 非模态对话框切换窗口焦点
- ubuntu mysql快捷键_ubuntu快捷键设置大全
- HIbernate Lazy 常用配置
- activiti java service task 服务任务
- Scrapy爬虫框架视频学习
- 从5亿红包到千亿营收,看百度的增长曲线
- Head First JAVA 拾忆-1
热门文章
- 【信息系统项目管理师】项目管理过程的三万字大论文
- 华为领衔,“5G+摄像头”拿下双影帝,多家国产手机凭借拍照入围MWC最佳演员...
- 微软WIN7系统瘦身全攻略
- Latex 表格单元格内换行
- IT通过什么途径去美国工作?
- 给邮箱和手机号码打码
- S32K144调试记录(二)
- android+读取电话权限,【uniapp】 读取手机通讯录权限
- manifest.json取消通讯录权限
- Tampermonkey 4.13.6140 油猴Safari浏览器插件