服务端渲染技术NUXT

什么是服务端渲染

​ 服务端渲染又称SSR (Server Side Render)，是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。

服务器端渲染(SSR)的优势主要在于：更好的 SEO。

​ 什么是SEO呢，SEO即搜索引擎优化的一种方式，是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，最终目的是要拉开与同行的差距，获得品牌收益，占领市场。从字面上来看，SEO就是能使网站排名在前，获得自由精确的流量。

由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示 loading 图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验，对于那些内容到达时间(time-to-content)与转化率直接相关的应用程序而言，服务器端渲染(SSR)至关重要。

什么是NUXT

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染 (SSR) 应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性。

官网网站：https://zh.nuxtjs.org/

NUXT初始化

1、下载压缩包

https://github.com/nuxt-community/starter-template/archive/master.zip

2、解压

将template中的内容复制到 guli

3、安装ESLint

将guli-admin项目下的.eslintrc.js配置文件复制到当前项目下

4、修改package.json

name、description、author（必须修改这里，否则项目无法安装）

 "name": "guli",
 "version": "1.0.0",
 "description": "谷粒学院前台网站",
 "author": "Helen <55317332@qq.com>",

5、修改nuxt.config.js

修改title: '{{ name }}'、content: '{{escape description }}'

这里的设置最后会显示在页面标题栏和meta数据中

head: {
    title: '谷粒学院 - Java视频|HTML5视频|前端视频|Python视频|大数据视频-自学拿1万+月薪的IT在线视频课程，谷粉力挺，老学员为你推荐',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'keywords', name: 'keywords', content: '谷粒学院,IT在线视频教程,Java视频,HTML5视频,前端视频,Python视频,大数据视频' },
      { hid: 'description', name: 'description', content: '谷粒学院是国内领先的IT在线视频学习平台、职业教育平台。截止目前,谷粒学院线上、线下学习人次数以万计！会同上百个知名开发团队联合制定的Java、HTML5前端、大数据、Python等视频课程，被广大学习者及IT工程师誉为：业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿的IT系列视频课程！' }
    ],
    link: [
	{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
},

6、在命令提示终端中进入项目目录

7、安装依赖

npm install

8、测试运行

npm run dev