服务端渲染

SSR：服务端渲染

• 原理：
  将同⼀个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应⽤程序。
• 应⽤场景：
  1. 应⽤需要更好的SEO
  2. 应⽤需要更快的内容到达时间 (⾸屏渲染时间)，特别是对于缓慢的⽹络情况或运⾏缓慢的设备。
• 局限：
  1. 更⼤的服务器端负载
  2. 较⾼的学习成本
  3. ⼀些外部扩展库使⽤会受限

Nuxt.js：Nuxt.js是一个基于Vue.js的通用应用框架。

• 特性

  1. 基于 Vue.js
  2. 自动代码分层
  3. 服务端渲染
  4. 强大的路由功能，支持异步数据
  5. 静态文件服务
  6. ES2015+语法支持
  7. 打包和压缩 JS 和 CSS
  8. HTML头部标签管理
  9. 本地开发支持热加载
  10. 集成ESLint
  11. 支持各种样式预处理器SASS、LESS、Stylus等等
  12. 支持HTTP/2推送

• 安装：

   npm install -g npx
   npm install -g create-nuxt-app
   npx create-nuxt-app  <项目名>
   // choose Koa、axio、Universal (SSR)
  

• 启动：npm run dev

• ⽬录结构

  1. assets：资源目录，用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
  2. components：组件目录，用于组织应用的Vue.js组件。Nuxt.js不会扩展增强该目录下Vue.js组件，即这些组件不会像页面组件那样有asyncData方法的特性。
  3. layouts：布局目录，用于组织应用的布局组件。若无额外配置，该目录不能被重命名。
  4. middleware：⽤于存放应⽤的中间件。
  5. pages：⻚⾯⽬录，⽤于组织应⽤的路由及视图。
  6. plugins：插件目录，用于组织那些需要在根vue.js应用实例化之前需要运行的Javascript插件。
  7. static：静态文件目录，用于存放应用的静态文件，此类文件不会被Nuxt.js调用Webpack进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径/下。若无额外配置，该目录不能被重命名。
  8. store：用于组织应用的Vuex状态树文件。Nuxt.js框架集成了Vuex状态树的相关功能配置，在store目录下创建一个index.js文件可激活这些配置。若无额外配置，该目录不能被重命名。
  9. nuxt.config.js 文件：用于组织Nuxt.js应用的个性化配置，以便覆盖默认配置。若无额外配置，该文件不能被重命名。

• 路由：
  Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置。页面之间使用路由，用<nuxt-link>标签。

   <template>
     <nuxt-link to="/">首页</nuxt-link>
   </template>
  

• 嵌套：嵌套：制造⼀个.vue⽂件和⽂件夹同名

• 动态路由：⽂件名或者⽂件夹名称要带_
  以下目录结构：

  pages/
  --| _slug/
  -----| comments.vue
  -----| index.vue
  --| user/
  -----| _id.vue
  -----| index.vue
  --| product/
  -----| _id.vue
  --| index.vue
  

  Nuxt.js生成对应的路由配置表为：

  routes: [{
    path: "/user",
    component: _c49ccf6e,
    children: [{
      path: "",
      component: _9cd9f7e8,
      name: "user"
    }, {
      path: ":id",
      component: _51ea9974,
      name: "user-id"
    }]
  }, {
    path: "/product/:id?",
    component: _63b48c0c,
    name: "product-id"
  }, {
    path: "/",
    component: _52799078,
    name: "index"
  }, {
    path: "/:slug",
    component: _76154fff,
    name: "slug"
  }, {
    path: "/:slug/comments",
    component: _cc523652,
    name: "slug-comments"
  }]