理解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.js
libraryTarget: '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框架的更多相关文章
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- 搭建简单的Spring框架
1.Spring框架相关jar包下载地址http://repo.springsource.org/libs-release-local/org/springframework/spring,复制,进入 ...
- 用Maven搭建简单的SpringMVC框架
本文会详细阐述如何用Maven搭建一个简单的SpringMVC框架 这里就不介绍SpringMVC框架了,咱们直接来搭建 第一步 创建一个Maven的web项目 这里有一个简单的方法 new一个Ma ...
- 模拟源码深入理解Vue数据驱动原理(2)
我们说到如果监听的属性是个对象呢?那么这个对象中的其他属性岂不就是监听不了了吗?如下: 倘若user中的name.age属性变化,如何知道它们变化了呢?今儿,就来解决这一问题. 通过走读Vue源码,发 ...
- 模拟源码深入理解Vue数据驱动原理(1)
Vue有一核心就是数据驱动(Data Driven),允许我们采用简洁的模板语法来声明式的将数据渲染进DOM,且数据与DOM是绑定在一起的,这样当我们改变Vue实例的数据时,对应的DOM元素也就会改变 ...
- 理解HashMap底层原理,一个简单的HashMap例子
package com.jl.testmap; /** * 自定义一个HashMap * @author JiangLai * */ public class MyHashMap<K,V> ...
- VueJS搭建简单后台管理系统框架(一)环境搭建
做这份笔记的时候,Vue.js还是1.0,10月份Vue已经升级到2.0,这边也进行相应的更新,用Vue2.0进行一个简单的环境搭建 饿了么也刚好开源了其基于Vue.js的UI框架element-ui ...
- VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求
开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...
- vue SSR : 原理(一)
前言: 由于vue 单页面对seo搜索引擎不支持,vue官网给了一个解决方案是ssr服务端渲染来解决seo这个问题,最近看了很多关于ssr的文章, 决定总结下: 参考博客:从0开始,搭建Vue2.0的 ...
随机推荐
- js-数字渐增到指定的数字,在指定的时间内完成(有动画效果哦)插件jquery.animateNumber.js
本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好. 但是,最终效果不理想! Why? 最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个 ...
- Python基础数据类型补充及深浅拷贝
本节主要内容:1. 基础数据类型补充2. set集合3. 深浅拷贝主要内容:一. 基础数据类型补充首先关于int和str在之前的学习中已经讲了80%以上了. 所以剩下的自己看一看就可以了.我们补充给一 ...
- C++对象
- Android传统View动画与Property动画基础及比较
前言:关于动画方面的知识也整理一段时间了,如题,这篇文章简单的介绍了View和Property动画的概念,如何在项目中创建资源文件,以及如何在代码中使用它们,本次整理动画的重点放在了Property动 ...
- 第四讲_图像识别之图像分类Image Classification
第四讲_图像识别之图像分类Image Classification 目录 图片分类 性能指标:top1,top5 ILSVRC:每种任务数据集不一样 imageNet:根据WorldNet组织的图片集 ...
- Jquery:怎样让子窗体的div显示在父窗体之上
<1> js或者jQuery訪问页面中的框架iframe. 注意:框架内的页面是不能跨域的! 如果有两个页面,在同样域下. 如果:父窗体 index.html ,有id 为 subif ...
- javascript 转义函数
// 字符转义 html2Escape(sHtml) { return sHtml.replace(/[<>&"]/g, function(c) { return { ' ...
- ffmpeg rtmp 推流错误WriteN, RTMP send error 10053 10038
利用ffmepg推264流到rtmp服务端出现错误WriteN, RTMP send error 10053,具体如下图所示. 图1推流到rtmp服务错误 原因是视频流缺少SPS,PPS信息,加上这两 ...
- php自定义错误
function myErrorHandler ( $errno , $errstr , $errfile , $errline ) { if (!( error_reporting () & ...
- PHP中使用Redis
Redis是什么 Redis ( REmote DIctionary Server ) , 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用 ...