Vue SSR（服务器渲染）探讨v1.0

什么是srr（服务器渲染）

直白的说就是在服务端拿数据进行解析渲染，直接生成html片段返回给前端。具体用法也有很多种比如：传统的服务端模板引擎渲染整个页面服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加。

为什么要做SSR

• 首先是seo问题，前端动态渲染的内容是不能被抓取到的，而使用服务端渲染就可以解决这个问题。
• 其次就是首屏加载过慢这种问题，比如在SPA中，打开首页需要初始加载很多资源，这时考虑在首屏使用服务端渲染，也是一种折中的优化方案。

使用NUTX实现服务器渲染

NUTX的作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR，类似的工具还有一个叫unvue的。

Nuxt使用步骤

1. 安装vue脚手架 npm install -g vue-cli
2. 完成后在需要创建的目录下执行以下命令：

vue init nuxt/koa ssr-demo(项目名称）
cd ssr-demo
npm install

1. 执行npm run dev
2. 打开浏览器
   http://localhost:3000

3. 目录结构
   

   image
   
   

   6.Nuxt.js 给出了最简单的目录结构

|-- pages
    |-- index.vue
|-- package.json

也就是说，至少需要一个 page 来作为展示页。

1. 文件的路径建议都采用绝对路径
   例：怎么在 /pages/user/me.vue 引入一个 static 文件夹里的图片

<img src="~static/img/logo.png" alt="Logo"/>

1. 路由
   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'
  }
]

1. 配置文件
   目录下的 nuxt.config.js 是我们唯一的配置入口，这里不建议修改 .nuxt 目录，除非特殊需求

默认的给力我们三个配置 ·head·css·loading· 分别是头部设置，全局css，loading进度条

nuxt.config.js 的全部的配置如下,点击查看具体例子

1. cache
2. loading
3. router
4. css
5. plugins
6. head
   另外还提供了 vuex 等配置，感兴趣可以去 github 和官网。

一个具体的例子(仿知乎live)

1. 在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"
                }
            ]
        }
    ]

1. 异步请求
   asyncData方法用于 fetch 数据，并在服务端渲染页面，返回给浏览器。

本文例子github地址：https://github.com/wotu-courses/ssr-demo

参考文章：
https://segmentfault.com/a/1190000007933349
https://segmentfault.com/a/1190000009842518