没有合适的资源?快使用搜索试试~ 我知道了~
前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口。Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些高的,这工作量无异于重构前端。另外对前端的技术要求也是挺高的,需要对Vue比较熟悉,还要有Node.js 和 webpack 的应用经验。 引入 Vue是一个构建客户端应用的框架,即vue组件是在浏览器中进行渲染的。所谓服务端渲染,指的是把vue组件在服务器端渲染为组装好的HTML字符串,然后将它们直接发送到浏览器,最后需要将这些静态标记”激活”为客户端上完全可交互的应用程序。 服务端渲染的优点
资源推荐
资源详情
资源评论
理解理解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-ssr-demo
第一步:编写第一步:编写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)
});
资源评论
weixin_38703277
- 粉丝: 6
- 资源: 915
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功