Vue.js 中如何使用 Nuxt.js 实现 SSR-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSR

SSR 即服务端渲染，它的基本工作流程是将 Vue 组件同步渲染到服务器，返回给客户端一个已经渲染好的 HTML 页面。相较于传统的 CSR（客户端渲染）模式，SSR 可以带来更好的首屏渲染速度和 SEO 优化。

Nuxt.js 简介

Nuxt.js 是一个开源的基于 Vue.js 的 SSR 框架，具有简单易用、扩展性强、开箱即用等特点。它提供了一系列可以自定义的配置和约定，开发者可以使用预设的目录结构和命名规则来规范化项目代码组织。

如何使用 Nuxt.js 实现 SSR

首先需要安装 Nuxt.js：在终端中执行 npm i nuxt。

创建 Nuxt.js 项目

在终端中执行 npx create-nuxt-app <project-name> 来创建一个新的 Nuxt.js 项目，项目目录结构如下：

├── .nuxt // Nuxt.js 生成的目录，存储编译后的代码和资源文件
├── assets // 存储非编译资源文件，例如图片、字体等
├── components // 存储 Vue.js 组件
├── layouts // 存储应用的布局组件
├── middleware // 存储中间件
├── pages // 存储 Vue.js 应用的页面
├── plugins // 存储插件
├── static // 存储静态资源文件，例如 favicon
├── store // 存储 Vuex 状态管理器相关代码
├── README.md 
├── nuxt.config.js // 存储 Nuxt.js 的配置文件
├── package-lock.json
└── package.json

使用 Nuxt.js 提供的模板和组件库

Nuxt.js 提供了模板和一些组件库可以使用，例如 Vuetify 和 Bootstrap。通过在 nuxt.config.js 配置文件中添加对应的模块名即可使用。例如：

module.exports = {
  modules: [
    // 使用 Vuetify
    '@nuxtjs/vuetify',
    // 使用 Bootstrap Vue
    'bootstrap-vue/nuxt'
  ],
  vuetify: {
    /* module options */
  },
  bootstrapVue: {
    /* module options */
  },
}

自定义路由

Nuxt.js 提供了自定义路由的配置，配置在 nuxt.config.js 文件中:

module.exports = {
  // 自定义路由
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '/custom',
        component: resolve(__dirname, 'pages/custom.vue')
      })
    }
  }
}

后端 API

在使用 SSR 的时候，Nuxt.js 需要通过后端 API 获取数据，从而构建 HTML 页面。如何访问后端 API 常见的有两种方式：

1.使用 Node.js 的 http 模块来发送 HTTP 请求，使用 res.write() 方法向前端推送数据。

2.使用开源的 HTTP 客户端 axios 来发送请求。

export default {
  asyncData({ params, $axios }) {
    return $axios.$get(`https://api.example.com/users/${params.id}`)
  }
}

预渲染

由于 SSR 在处理后端渲染时，体验依赖于服务端的性能，如果在高并发场景下，或者某些路由对性能要求较高的情况下，可以通过预渲染的方式进行优化。预渲染的过程在构建时进行，将预渲染好的内容存储到已编译资源的目录中，当客户端在访问页面时，直接将预渲染好的内容展示出来，从而减轻了服务端的压力。

预渲染只需要在 nuxt.config.js 中添加以下配置：

module.exports = {
  // 配置需要预渲染的页面
  generate: {
    routes: [
      '/page1',
      '/page2',
      '/page3'
    ]
  }
}

总结

本文介绍了如何使用 Nuxt.js 实现 Vue.js 的 SSR，包括创建 Nuxt.js 项目、使用 Nuxt.js 提供的模板和组件库、自定义路由、后端 API 和预渲染。通过阅读本文，您能够更好地理解 SSR 的意义和优势，并掌握使用 Nuxt.js 实现 SSR 的技巧。

附上示例代码：https://github.com/muyuuuu/vue-nuxt-ssr

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65aadc20add4f0e0ff470fac