服务端渲染和nuxt简单介绍
概述
最近研究了一下服务端渲染,有一些心得,记录下来供以后开发时参考,相信对其他人也有用。
参考资料:
服务端渲染介绍
服务端渲染简单来说,就是分别对项目用webpack打包2次,一次生成vue-ssr-server-bundle.json,一次生成vue-ssr-client-manifest.json和其它静态文件,最后用node搭一个服务器接收这2个json文件进行组装,并发送给用户。其中有以下几点需要注意:
1.工厂函数
我们需要对vue, vue-router, vuex用一个工厂函数包裹起来,进行延迟执行。原因是node server每次会接受很多http请求,而vue却只有一个示例,如果在打包前把实例先初始化的话,以后的每次请求就会发送同一个实例,造成交叉请求状态污染 (cross-request state pollution)。示例如下:
// app.js
const Vue = require('vue')
module.exports = function createApp (context) {
return new Vue({
data: {
url: context.url
},
template: `<div>访问的 URL 是: {{ url }}</div>`
})
}
2.服务端渲染的生命周期
在所有vue的生命周期钩子函数中,beforeCreate 和 created 会在服务端渲染的时候被调用,其它生命周期会在客户端执行。
所以我们在 beforeCreate 和 created 这2个生命周期内不能访问this,也不能访问window,更不能访问组件实例等。一般我们在 beforeCreate 和 created 中会做的事情有:发送http请求事先填充store,鉴权,发送http请求初始化组件data等。我们在客户端进行初始化的http请求都需要移动到 mounted 或者 beforeMount 生命周期中。
3.axios
我们发送http请求的库推荐使用axios。又因为axios不仅会用在客户端发送http请求,还会用在服务端发送http请求,所以在给axios设置拦截器的时候需要小心使用和window或者dom相关的方法。
4.HTML结构
因为vue的服务端渲染主要是由vue-server-renderer库完成的,它在解析html标签的时候会有一些坑,就是html结构需要很严格的书写,至少要做到以下2点:
- 不要漏写结束标签。
- p标签里面不能使用块级标签,如果非要使用的话,需要把p标签换成div标签。
5.缓存
我们一般给node server使用 micro-caching 缓存策略:让 node server 把动态内容储存1秒,也就是说无论这一秒有多少请求,node server 只会生成一次动态内容。这个是通过LRU库来实现的。另外还有组件级别的缓存,这里就不多说了。
nuxt.js
1.yarn
虽然nuxt项目可以用npm运行,但是仍然推荐使用yarn来运行此项目,步骤如下:
先检查电脑中是否有homebrew:
$ brew -v
如果有homebrew的话跳过此步,没有的话使用以下命令安装:
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
最后使用homebrew安装yarn:
$ brew install yarn
这里是npm和yarn的对照:
npm install
===yarn
npm run dev
===yarn run dev
npm init
===yarn init
npm install <package>
===yarn add <package>
npm uninstall <package>
===yarn remove <package>
npm update <package>
===yarn upgrade <package>
2.指令
# 安装所有依赖包
$ yarn
# 安装某个依赖包
$ yarn add <package>
# 打开开发环境
$ yarn dev
# 正式环境
$ yarn build
$ yarn start
# 开发环境下重启服务(很重要)
$ 输入rs 再按回车键
# 自动修复eslint错误
$ yarn lint
# 生成可视化依赖图(相当于vue-cli3的vue inspect指令)
$ yarn analyze
3.在开发的时候需要注意如下几点:
- eslint在一些方面比其它项目更加严格,按报错提示修改就可以了。(这些方面我没有改成和其它项目一样是因为我觉得这些习惯很好)
- 静态资源放在static文件夹里面,svg雪碧图放在
assets/sprite/
文件夹里面。 - 文件夹名字不能改。(nuxt.js本身要求)
- 其它比如pages文件夹里面每个文件就是一个路由,可以看nuxt.js官方文档。
服务端渲染和nuxt简单介绍的更多相关文章
- 服务端渲染技术NUXT
什么是服务端渲染 服务端渲染又称SSR (Server Side Render),是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据. 服务器端渲染(SSR)的优势主要在于:更好的 SE ...
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue服务端渲染和Vue浏览器端渲染的性能对比
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染(个人博客二)
缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...
- next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序
前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...
- 解析Nuxt.js Vue服务端渲染摸索
本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单 ...
- Nuxt.js vue服务端渲染
一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
随机推荐
- ETCD相关介绍--整体概念及原理方面
etcd作为一个受到ZooKeeper与doozer启发而催生的项目,除了拥有与之类似的功能外,更专注于以下四点. 简单:基于HTTP+JSON的API让你用curl就可以轻松使用. 安全:可选SSL ...
- DAY2-MySQL专业安装
MySQL安装 安装方法: 1.源码 2.二进制 (建议使用) 3.rpm (尽量不用) 一.下载MySQL: 一定要从官网下载,防止被勒索. 官网: http://dev/mysql.com 版本: ...
- 把一个机器上1天内新增的文件用rsync传送到另外一台机器
我的shell很菜,只好用shell和php结合来做 1.查找新增的文件,构造rsync的参数,把结果写入到log中 find /data/bmob/test/teststorage/data/ -m ...
- (二)Servlet入门之HelloWorld
在整个Servlet程序中最重要的就是Servlet接口,在此接口下定义了一个GenericServlet的子类,但是,一般不会直接继承此类,而是根据所使用的协议选择GenericServlet的子类 ...
- 理解Go Interface
理解Go Interface 1 概述 Go语言中的接口很特别,而且提供了难以置信的一系列灵活性和抽象性.接口是一个自定义类型,它是一组方法的集合,要有方法为接口类型就被认为是该接口.从定义上来看,接 ...
- 「SDOI 2018」反回文串
题目大意: 求字符集大小为$k$长度为$n$的经循环移位后为回文串的数量. 题解: 这题是D1里最神的吧 考虑一个长度为$n$回文串,将其循环移位后所有的串都是满足要求的串. 但是显然这样计算会算重. ...
- 开发教程(四) MIP组件平台使用说明
组件审核平台用于上传 MIP 组件.经过自动校验之后,提交审核,通过审核的组件会定时推送到线上,供网站使用. 平台地址:https://www.mipengine.org/platform/ 1. 使 ...
- Boosting(提升方法)之GBDT
一.GBDT的通俗理解 提升方法采用的是加法模型和前向分步算法来解决分类和回归问题,而以决策树作为基函数的提升方法称为提升树(boosting tree).GBDT(Gradient Boosting ...
- mysql实现主从备份
mysql 主从备份的原理: 主服务器在做数据库操作的时候将所有的操作通过日志记录在binlog里面,有专门的文件存放.如localhost-bin.000003,这种,从服务器 和主服务配置好关系后 ...
- 第一章.java&golang的区别之:闭包
对于golang一直存有觊觎之心,但一直苦于没有下定决心去学习研究,最近开始接触golang.就我个人来说,学习golang的原动力是因为想要站在java语言之外来审视java和其它语言的区别,再就是 ...