现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如angular、react和vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目seo带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据,由于单页面应用读取到的页面是几乎空白的,无法爬取到任何数据信息。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>authorization_web</title>
</head>
<body>
<div id=app></div>
</body>
</html>
如上代码,单页面应用查看源代码的时候如上所示,所以搜索引擎无法爬取到任何信息,搜索引擎会认为当前页面为一个空页面。为了解决SEO问题,推出了SSR服务端预渲染,以便提高对SEO优化。
在认识SSR之前,首先对CSR与SSR之间做个对比。
首先看一下传统的web开发,传统的web开发是,客户端向服务端发送请求,服务端查询数据库,拼接HTML字符串(模板),通过一系列的数据处理之后,把整理好的HTML返回给客户端,浏览器相当于打开了一个页面。这种比如我们经常听说过的jsp,php,aspx也就是传统的MVC的开发。
SPA应用,到了Vue、React,单页面应用优秀的用户体验,逐渐成为了主流,页面整体式javaScript渲染出来的,称之为客户端渲染CSR。SPA渲染过程。由客户端访问URL发送请求到服务端,返回HTML结构(但是SPA的返回的HTML结构是非常的小的,只有一个基本的结构,如第一段代码所示)。客户端接收到返回结果之后,在客户端开始渲染HTML,渲染时执行对应javaScript,最后渲染template,渲染完成之后,再次向服务端发送数据请求,注意这里时数据请求,服务端返回json格式数据。客户端接收数据,然后完成最终渲染。
SPA虽然给服务器减轻了压力,但是也是有缺点的:
为了解决如上两个问题,出现了SSR解决方案,后端渲染出首屏的dom结构返回,前端拿到内容带上首屏,后续的页面操作,再用单页面路由和渲染,称之为服务端渲染(SSR)。
SSR渲染流程是这样的,客户端发送URL请求到服务端,服务端读取对应的url的模板信息,在服务端做出html和数据的渲染,渲染完成之后返回html结构,客户端这时拿到的之后首屏页面的html结构。所以用户在浏览首屏的时候速度会很快,因为客户端不需要再次发送ajax请求。并不是做了SSR我们的页面就不属于SPA应用了,它仍然是一个独立的spa应用。
SSR是处于CSR与SPA应用之间的一个折中的方案,在渲染首屏的时候在服务端做出了渲染,注意仅仅是首屏,其他页面还是需要在客户端渲染的,在服务端接收到请求之后并且渲染出首屏页面,会携带着剩余的路由信息预留给客户端去渲染其他路由的页面。
在Nuxt官方网站有一句这样的话:Nuxt.js预设了使您开发Vue.js应用程序所需的所有配置。Nuxt是一个基于Vue.js的通用应用框架。通过对客户端/服务端基础框架的抽象组织,Nuxt主要关注的是应用的ui渲染。
通过上面的这些介绍可以简单的得出:
一个完整的服务器请求到渲染的流程
通过上面的流程图可以看出,当一个客户端请求进入的时候,服务端有通过nuxtServerInit这个命令执行在Store的action中,在这里接收到客户端请求的时候,可以将一些客户端信息存储到Store中,也就是说可以把在服务端存储的一些客户端的一些登录信息存储到Store中。之后使用了中间件机制,中间件其实就是一个函数,会在每个路由执行之前去执行,在这里可以做很多事情,或者说可以理解为是路由器的拦截器的作用。然后再validate执行的时候对客户端携带的参数进行校验,在asyncData与fetch进入正式的渲染周期,asyncData向服务端获取数据,把请求到的数据合并到Vue中的data中,
Nuxt安装:
确保安装了npx(npx在npm版本5.2.0默认安装了):
npx create-nuxt-app <项目名>
安装向导:
Project name // 项目名称
Project description // 项目描述
Use a custom server framework // 选择服务器框架
Choose features to install // 选择安装的特性
Use a custom UI framework // 选择UI框架
Use a custom test framework // 测试框架
Choose rendering mode // 渲染模式
Universal // 渲染所有连接页面
Single Page App // 只渲染当前页面
这些都是比较重要的其他的配置内容就不做介绍了,一路回车即可。
assets // 存放素材(需要执行webpack预处理操作)
components // 组件
layouts // 布局文件
static // 静态文件(不需要webpack预处理操作)
middleware // 中间件
pages // 所有页面
plugins // 插件
server // 服务端代码
store // vuex
const pkg = require('./package')
module.exports = {
mode: 'universal', // 当前渲染使用模式
head: { // 页面head配置信息
title: pkg.name, // title
meta: [ // meat
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [ // favicon,若引用css不会进行打包处理
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#fff' }, // 页面进度条
css: [ // 全局css(会进行webpack打包处理)
'element-ui/lib/theme-chalk/index.css'
],
plugins: [ // 插件
'@/plugins/element-ui'
],
modules: [ // 模块
'@nuxtjs/axios',
],
axios: {},
build: { // 打包
transpile: [/^element-ui/],
extend(config, ctx) { // webpack自定义配置
}
}
}
{
"scripts": {
// 开发环境
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
// 打包
"build": "nuxt build",
// 在服务端运行
"start": "cross-env NODE_ENV=production node server/index.js",
// 生成静态页面
"generate": "nuxt generate"
}
}
这里简单的对Nuxt做了一些介绍,会持续更新对Nuxt的跟进,希望会对大家有所帮助,如果有什么问题,可以在下面留言。
来自:https://segmentfault.com/a/1190000018777955
一款基于Vue.js的SSR框架——Nuxt.js。是vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的vue项目。
在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件。
在组件和布局中需要使用到相同的数据,改数据需要在nuxt初始化时候获取,而且仅从服务器端获取一次即可。那么该如何实现nux全局初始化功能呢?可以通过vuex来管理全局的一个状态的数据,Nuxt.js 的渲染流程,最先调用的即是 nuxtServerInit 方法。
Nuxt.js基于名为Next的热门React库的SSR实现。 为Vue设计了一个名为Nuxt的类似实现。 熟悉React + Next组合的人会在应用程序的设计和布局中发现一些相似之处。 但是,Nuxt提供Vue特有的功能来为Vue创建强大且灵活的SSR解决方案。
最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢?这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的,所以我们首先需要在启动命令后加上 --exec babel-node
Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。静态应用部署就不说了,主要说说服务端渲染应用部署。每次在服务器上执行nuxt build,总是有如下报错,并且jenkins会随之挂掉。
uxt打包的静态文件可以直接放在GitHub上面,然后 TravisCI跟GitHub又很亲切,就选择了TravisCI部署。Travis CI 部署到GitHub项目gh-pages分支上,打开页面发现引用资源404?
Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装。Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:Nuxt.js 支持两种使用 store 的方式:普通方式: store/index.js 返回一个 Vuex.Store 实例
最近另一个网站的谷歌联盟申请下来了,记录一下Nuxt.js如何引用谷歌广告的JS代码,当初找了好久。只配置nuxt.config.js文件就可以,下面贴出来。
webstorm 设置@和~别名,有助于代码查看和跳转.在项目下创建一个webpack.config.js,内容如下;设置 IDE:webstorm -> file -> settings -> language & frameworks -> javascript -> webpack
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!