传统的服务端渲染
    传统的服务端渲染是路由在服务端，请求的页面都是服务端拼接好数据后，写入响应体中返回给客户端，每次路由的改变都会重新请求页面，刷新数据。

    vue的SSR
    专业名词：同构渲染
    工作原理：首屏渲染由服务端完成需要的数据拼接返回给客户端一个html文件，html是通过webpack打包生成的，包括其余的资源（不需要在首次渲染的时候立刻请求的，目的是尽量缩短首屏的渲染时间）

    客户端渲染
    服务器返回的html文件中不会有body的内容，是一个空的ID为app的节点，搜索引擎就是在第一次解析页面的时候分析文档的内容，这里面什么都没有，肯定不利于SEO.

    使用nuxt进行同构渲染
    nuxt有自带路由，但是这次它的路由满足不要我们的需求，所以我们自己写路由
    插件也需要在这里注册哦！

    1. // nuxt.config.js
    2. /**
    3.  * Nuxt.js 配置文件
    4.  */
    6. module.exports = {
    7.   router: {
    8.     linkActiveClass: 'active',
    9.     // 自定义路由表规则
    10.     extendRoutes (routes, resolve) {
    11.       // 清除 Nuxt.js 基于 pages 目录默认生成的路由表规则
    12.       routes.splice(0)
    14.       routes.push(...[
    15.         {
    16.           path: '/',
    17.           component: resolve(__dirname, 'pages/layout/'),
    18.           children: [
    19.             {
    20.               path: '', // 默认子路由
    21.               name: 'home',
    22.               component: resolve(__dirname, 'pages/home/')
    23.             },
    24.             {
    25.               path: '/login',
    26.               name: 'login',
    27.               component: resolve(__dirname, 'pages/login/')
    28.             }
    30.           ]
    31.         }
    32.       ])
    33.     }
    34.   },
    36.   server: {
    37.     host: '0.0.0.0',
    38.     port: 3000
    39.   },
    41.   // 注册插件
    42.   plugins: [
    43.     '~/plugins/request.js',
    44.     '~/plugins/dayjs.js'
    45.   ]
    46. }

    nuxtServerInt 在store的action中使用

    1. export const actions = {
    2.   // nuxtServerInit 是一个特殊的 action 方法
    3.   // 这个 action 会在服务端渲染期间自动调用
    4.   // 作用：初始化容器数据，传递数据给客户端使用
    5.   nuxtServerInit ({ commit }, { req }) {
    6.     let user = null
    8.     // 如果请求头中有 Cookie
    9.     if (req.headers.cookie) {
    10.       // 使用 cookieparser 把 cookie 字符串转为 JavaScript 对象
    11.       const parsed = cookieparser.parse(req.headers.cookie)
    12.       try {
    13.         user = JSON.parse(parsed.user)
    14.       } catch (err) {
    15.         // No valid cookie found
    16.       }
    17.     }
    19.     // 提交 mutation 修改 state 状态
    20.     commit('setUser', user)
    21.   }
    22. }

    middleware在在创建文件之后，直接在.vue中使用
    在.vue 的 asyncData 中书写获取数据的代码

    2.   async asyncData ({ query }) {
    3.     const page = Number.parseInt(query.page|| 1)
    4.     const limit = 20
    5.     const tab = query.tab || 'global_feed'
    6.     const tag = query.tag
    8.     const loadArticles = tab === 'global_feed'
    9.       ? getArticles
    10.       : getYourFeedArticles
    12.     const [ articleRes, tagRes ] = await Promise.all([
    13.       loadArticles({
    14.         limit,
    15.         offset: (page - 1) * limit,
    16.         tag
    17.       }),
    18.       getTags()
    19.     ])
    21.     const { articles, articlesCount } = articleRes.data
    22.     const { tags } = tagRes.data
    24.     articles.forEach(article => article.favoriteDisabled = false)
    26.     return {
    27.       articles, // 文章列表
    28.       articlesCount, // 文章总数
    29.       tags, // 标签列表
    30.       limit, // 每页大小
    31.       page, // 页码
    32.       tab, // 选项卡
    33.       tag // 数据标签
    34.     }
    35.   },

    在.vue 的 watchQuery 中书写监听变量变化的代码

    2.   watchQuery: ['page', 'tag', 'tab'],

    点赞功能要限制次数

    1. article.favoriteDisabled = true

    客户端持久化用户信息

    2. // 仅在客户端加载 js-cookie 包
    3. const Cookie = process.client ? require('js-cookie') : undefined
    5. methods: {
    6.     async onSubmit () {
    7.       try {
    8.         // 提交表单请求登录
    9.         const { data } = this.isLogin
    10.           ? await login({
    11.               user: this.user
    12.             })
    13.           : await register({
    14.             user: this.user
    15.           })
    17.         // console.log(data)
    18.         // TODO: 保存用户的登录状态
    19.         this.$store.commit('setUser', data.user)
    21.         // 为了防止刷新页面数据丢失，我们需要把数据持久化
    22.         Cookie.set('user', data.user)
    24.         // 跳转到首页
    25.         this.$router.push('/')
    26.       } catch (err) {
    27.         // console.log('请求失败', err)
    28.         this.errors = err.response.data.errors
    29.       }
    30.     }
    31.   }

    在store中做好服务端的持久化

    2. const cookieparser = process.server ? require('cookieparser') : undefined
    4. export const actions = {
    5.   // nuxtServerInit 是一个特殊的 action 方法
    6.   // 这个 action 会在服务端渲染期间自动调用
    7.   // 作用：初始化容器数据，传递数据给客户端使用
    8.   nuxtServerInit ({ commit }, { req }) {
    9.     let user = null
    11.     // 如果请求头中有 Cookie
    12.     if (req.headers.cookie) {
    13.       // 使用 cookieparser 把 cookie 字符串转为 JavaScript 对象
    14.       const parsed = cookieparser.parse(req.headers.cookie)
    15.       try {
    16.         user = JSON.parse(parsed.user)
    17.       } catch (err) {
    18.         // No valid cookie found
    19.       }
    20.     }
    22.     // 提交 mutation 修改 state 状态
    23.     commit('setUser', user)
    24.   }
    25. }

    相当于客户端和服务端都要持久化一份数据