什么是srr（服务器渲染）
直白的说就是在服务端拿数据进行解析渲染，直接生成html片段返回给前端。具体用法也有很多种比如：传统的服务端模板引擎渲染整个页面服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加。
为什么要做SSR
- 首先是seo问题，前端动态渲染的内容是不能被抓取到的，而使用服务端渲染就可以解决这个问题。
- 其次就是首屏加载过慢这种问题，比如在SPA中，打开首页需要初始加载很多资源，这时考虑在首屏使用服务端渲染，也是一种折中的优化方案。
使用NUTX实现服务器渲染
NUTX的作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR，类似的工具还有一个叫unvue的。
Nuxt使用步骤
- 安装vue脚手架 npm install -g vue-cli
- 完成后在需要创建的目录下执行以下命令：
vue init nuxt/koa ssr-demo(项目名称）
cd ssr-demo
npm install
- 执行npm run dev
- 打开浏览器
http://localhost:3000 -
目录结构image
6.Nuxt.js 给出了最简单的目录结构
|-- pages
|-- index.vue
|-- package.json
也就是说，至少需要一个 page 来作为展示页。
-
文件的路径建议都采用绝对路径
例：怎么在 /pages/user/me.vue 引入一个 static 文件夹里的图片
<img src="~static/img/logo.png" alt="Logo"/>
-
路由
Nuxt.js 根据 pages 目录结构去生成 vue-router 配置，也就是说 pages 目录的结构直接影响路由结构
例1:
|-- pages
|-- posts
|-- index.vue
|-- welcome.vue
|-- about.vue
|-- index.vue
会生成
routes: [
{
path: '/posts',
component: '~pages/posts/index.vue'
}, {
path: '/posts/welcome',
component: '~pages/posts/welcome.vue'
}, {
path: '/about',
component: '~pages/about.vue'
}, {
path: '/',
component: '~pages/index.vue'
}
]
例2:隐藏路由 在文件名前加 _
|-- pages
|-- _about.vue
|-- index.vue
会生成
routes: [
{
path: '/',
component: '~pages/index.vue'
}
]
-
配置文件
目录下的 nuxt.config.js 是我们唯一的配置入口，这里不建议修改 .nuxt 目录，除非特殊需求
默认的给力我们三个配置 ·head·css·loading· 分别是头部设置，全局css，loading进度条
nuxt.config.js 的全部的配置如下,点击查看具体例子
一个具体的例子(仿知乎live)
-
在pages下面创建如下文件夹和文件
会生成如下路由
[
{
path: "/",
component: _f50ec93a,
name: "index",
children: [
{
path: "me",
component: _52bc7474,
name: "index-me"
},
{
path: "home",
component: _097b5f3b,
name: "index-home"
},
{
path: "course",
component: _361a8b77,
name: "index-course"
},
{
path: "hot",
component: _111d20a1,
name: "index-hot"
}
]
},
{
path: "/account",
component: _2c407cfe,
name: "account",
children: [
{
path: "register",
component: _1eaf91c4,
name: "account-register"
},
{
path: "login",
component: _4a531fd0,
name: "account-login"
}
]
}
]
- 异步请求
asyncData方法用于 fetch 数据，并在服务端渲染页面，返回给浏览器。
本文例子github地址：https://github.com/wotu-courses/ssr-demo
参考文章：
https://segmentfault.com/a/1190000007933349
https://segmentfault.com/a/1190000009842518
