服务端预渲染之Nuxt(介绍篇)
现在前端开发一般都是前后端分离,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
在认识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
虽然给服务器减轻了压力,但是也是有缺点的:
- 首屏渲染时间比较长:必须等待
JavaScript
加载完毕,并且执行完毕,才能渲染出首屏。 SEO
不友好:爬虫只能拿到一个div
元素,认为页面是空的,不利于SEO
。
为了解决如上两个问题,出现了SSR
解决方案,后端渲染出首屏的DOM
结构返回,前端拿到内容带上首屏,后续的页面操作,再用单页面路由和渲染,称之为服务端渲染(SSR
)。
SSR
渲染流程是这样的,客户端发送URL
请求到服务端,服务端读取对应的url
的模板信息,在服务端做出html
和数据
的渲染,渲染完成之后返回html
结构,客户端这时拿到的之后首屏页面的html
结构。所以用户在浏览首屏的时候速度会很快,因为客户端不需要再次发送ajax
请求。并不是做了SSR
我们的页面就不属于SPA
应用了,它仍然是一个独立的spa
应用。
SSR
是处于CSR
与SPA
应用之间的一个折中的方案,在渲染首屏的时候在服务端做出了渲染,注意仅仅是首屏,其他页面还是需要在客户端渲染的,在服务端
接收到请求之后并且渲染出首屏页面,会携带着剩余的路由信息预留给客户端
去渲染其他路由的页面。
Nuxt.js 介绍
在Nuxt
官方网站有一句这样的话:Nuxt.js
预设了使您开发Vue.js
应用程序所需的所有配置。Nuxt
是一个基于Vue.js
的通用应用框架。通过对客户端/服务端
基础框架的抽象组织,Nuxt
主要关注的是应用的ui
渲染。
通过上面的这些介绍可以简单的得出:
Nuxt
不仅仅用于服务端渲染也可以用于SPA
应用的开发- 利用
Nuxt
提供的项目结构、异步数据加载,中间件的支持,布局等特性可大幅提升开发效率 Nuxt
可用于网站静态化,可以使用命令将整个网页打包成静态页面,使SEO
更加友好
Nuxt.js 特性
- 基于
Vue
- 自动代码分层
- 服务端渲染
- 强大的路由功能,支持异步数据
- 静态文件服务
EcmaScript6
和EcmaScript7
的语法支持- 打包和压缩
JavaScript
和Css
HTML
头部标签管理- 本地开发支持热加载
- 集成
ESLint
- 支持各种样式预编译器
SASS
、LESS
等等 - 支持
HTTP/2
推送
Nuxt 渲染流程
一个完整的服务器请求到渲染的流程
通过上面的流程图可以看出,当一个客户端请求进入的时候,服务端有通过nuxtServerInit
这个命令执行在Store
的action
中,在这里接收到客户端请求的时候,可以将一些客户端信息存储到Store
中,也就是说可以把在服务端存储的一些客户端的一些登录信息存储到Store
中。之后使用了中间件
机制,中间件其实就是一个函数,会在每个路由执行之前去执行,在这里可以做很多事情,或者说可以理解为是路由器的拦截器的作用。然后再validate
执行的时候对客户端携带的参数进行校验,在asyncData
与fetch
进入正式的渲染周期,asyncData
向服务端获取数据,把请求到的数据合并到Vue
中的data
中,
Nuxt说明
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自定义配置
}
}
}
# Nuxt运行命令
{
"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
的跟进,希望会对大家有所帮助,如果有什么问题,可以在下面留言。
服务端预渲染之Nuxt(介绍篇)的更多相关文章
- 服务端预渲染之Nuxt (使用篇)
服务端预渲染之Nuxt - 使用 现在大多数开发都是基于Vue或者React开发的,能够达到快速开发的效果,也有一些不足的地方,Nuxt能够在服务端做出渲染,然后让搜索引擎在爬取数据的时候能够读到当前 ...
- 服务端预渲染之Nuxt(爬坑篇)
Nuxt是解决SEO的比较常用的解决方案,随着Nuxt也有很多坑,每当突破一个小技术点的时候,都有很大的成就感,在这段时间里着实让我痛并快乐着.在这里根据个人学习情况,所踩过的坑做了一个汇总和总结. ...
- vue-cil 服务端预渲染 prerender-spa-plugin
众所周知单页面应用不利于SEO,为了解决这个问题网上所给出的2个解决方案1.SSH服务器端渲染2.预渲染由于页面较少,且预渲染相对于SSH比较简单,于是选择预渲染页面,预渲染可以极大的提高网页访问速度 ...
- Java 服务端监控方案(四. Java 篇)
http://jerrypeng.me/2014/08/08/server-side-java-monitoring-java/ 这个漫长的系列文章今天要迎来最后一篇了,也是真正与 Java 有关的部 ...
- 服务端技术进阶(八)GitHub入门篇
服务端技术进阶(八)GitHub入门篇 前言 在投递简历的过程中,发现有的公司会要求填写自己的GitHub地址,而自己却还没有GitHub帐号,准确点说是自己还不太会使用GitHub.(貌似开源社区中 ...
- 对爱奇艺PC Web主站来说,良好的SEO能够帮助其获得更多的搜索流量,因而页面上一些非常重要的内容仍然需要依靠服务端进行渲染,由于另外开发一套基于Node的SSR后台成本较高,而乐趣(基于java和velocity模板引擎)平台作为渲染系统已经十分成熟且运行稳定,在充分试验后,我们决定在Uniqy中使用服务端同步与客户端浏览器异步二次渲染相结合的方式,结合Vue2.0提供的 slot插槽机制,很
https://mp.weixin.qq.com/s/eB20BoqzENO_oNk8eDg4Eg 干货|爱奇艺PC Web新框架实践 原创: 前端研发团队 爱奇艺技术产品团队 昨天
- Angular开发实践(六):服务端渲染
Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务端运行 Angular 应用的技术. 标 ...
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- 前端性能优化成神之路--SSR(服务端渲染)
Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用V ...
随机推荐
- ccos2d-x 学习
渲染驱动方式,事件驱动方式 this->addChild(pSprite, 0); 的第二个参数(int zOrder)表示要添加到this类对象中的顺序.是由里向外的方向.值越大表示越在外面. ...
- 虚拟机配置Openstack常见问题汇总
之前配置了openstack,遇到一些问题,现在将问题全部汇总记录在这里. (1)问题:主机名字修改不了: 原因:没有进入root状态:或者没有正确打开文件,要打开的是/etc/hostname,结果 ...
- 单片机开发——03工欲善其事必先利其器(AD软件安装破解)
在单片机开发中,有了Keil的程序编程,Protues的模拟仿真,那么问题来了,怎么去进行电路图设计以及硬件调试呢?此刻就必须引入本文的Altium Designer (下文简称AD)安装与破解.在硬 ...
- 构建具有用户身份认证的 Ionic 应用
序言:本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证.教程简易,对于 Ionic 入门学习有一定帮助.因为文章是去年发表,所以教程内关于 Okta 的一些使用步 ...
- PCB布线要求
时钟线要求 时钟驱动器布局在PCB中心而非电路板外围,布局尽量靠近,走线圆滑.短,非直角.非T形,布线可选4~8mil,过窄会导致高频信号衰减,并降低信号之间电容性耦合. 避免时钟之间.与信号之间的干 ...
- jsp 增删改查
使用Idea创建项目 1.新建web application项目 Idea 选择 Java Enterprise -> web application 2.新版本没有web-inf文件夹 解决方 ...
- xml、网络编程、 反射
XML 常用于配置文件.传输数据. <?xml version="1.0" encoding="UTF-8"?><persons> &l ...
- Python并发编程之线程中的信息隔离(五)
大家好,并发编程 进入第三篇. 上班第一天,大家应该比较忙吧.小明也是呢,所以今天的内容也很少.只要几分钟就能学完. 昨天我们说,线程与线程之间要通过消息通信来控制程序的执行. 讲完了消息通信,今天就 ...
- linux进程、线程与cpu的亲和性(affinity)
参考:http://www.cnblogs.com/wenqiang/p/6049978.html 最近的工作中对性能的要求比较高,下面简单做一下总结: 一.什么是cpu亲和性(affinity) C ...
- FPA笔记三 数据功能的识别
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://welkinhu.blog.51cto.com/447606/115477 ...