服务端预渲染之Nuxt(使用篇)

2023年6月11日上午9:44 • JavaScript

服务端预渲染（Server-Side Rendering，SSR）是一种Web应用程序的开发方法，它将初始HTML和渲染的JavaScript发送给客户端，而不是在客户端浏览器中使用JavaScript再进行处理和渲染。

Nuxt.js是一个基于Vue.js的应用框架，它专注于提供一个开箱即用的服务器渲染体验。Nuxt.js 可以帮助我们快速开发、部署 Vue.js 应用。

本文将详细讲解如何使用Nuxt.js进行服务端预渲染，以下是完整攻略：

安装Nuxt

使用Nuxt.js之前，首先你需要在你的机器上安装Node.js，然后在终端中全局安装Nuxt.js：

npm install -g nuxt

创建Nuxt项目

在安装Nuxt.js之后，你可以运行以下命令来创建Nuxt.js项目：

npx create-nuxt-app <project-name>

请替换为你的项目名称。这里需要注意的是，在创建项目的过程中，必须选择“Server side rendering (SSR)”，这样才能使用Nuxt.js的服务端渲染。

配置Nuxt

Nuxt.js提供了一个配置文件nuxt.config.js，你可以在这个文件中配置你的Nuxt.js项目。以下是一个基本的nuxt.config.js文件：

export default {
  // 服务端渲染相关的配置
  mode: 'universal',
  server: {
    port: process.env.PORT || 3000,
    host: process.env.HOST || 'localhost'
  },

  // 网站标题
  head: {
    title: 'My Website',
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: 'My awesome website'}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
    ]
  },

  // 路由配置
  router: {
    // ...
  },

  // 模块配置
  modules: [
    '@nuxtjs/axios'
  ]
}

在上面的配置文件中，我们可以看到Nuxt.js提供了很多配置选项，包括服务端渲染、网站标题、路由配置、模块配置等等。

创建动态路由

在Nuxt.js中，动态路由是一种非常方便的方式来创建动态页面。动态路由的格式与Vue.js的动态路由相同，使用带有“:”前缀的参数标识符。

以下是一个动态路由的示例：

// pages/posts/_id.vue

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  async asyncData ({ params, $axios }) {
    const { data } = await $axios.get(`https://api.example.com/posts/${params.id}`)
    return { post: data }
  }
}
</script>

在上面的示例中，我们创建了一个动态路由“/posts/:id”，并在页面组件中使用了asyncData方法来获取相关的数据。

服务端预渲染

服务端预渲染是Nuxt.js最常用的功能之一。它可以在服务器端渲染和呈现Vue.js应用程序的初始HTML。它使应用程序在首次加载时更快，并提高了搜索引擎的可见性。

使用Nuxt.js进行服务端预渲染非常简单，只需要在根组件中使用export default指定一个asyncData属性即可。例如：

// pages/index.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  async asyncData ({ $axios }) {
    const { data } = await $axios.get('https://api.example.com/articles')
    return { title: data[0].title, content: data[0].content }
  }
}
</script>

在上面的示例中，我们在根组件中指定了一个asyncData属性，并在其中使用$axios获取了一些数据。这些数据将在服务器端呈现和预渲染，并在客户端启动之前一起发送给浏览器。

另一个服务端预渲染的示例是在动态路由中使用asyncData。例如：

// pages/posts/_id.vue

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  async asyncData ({ params, $axios }) {
    const { data } = await $axios.get(`https://api.example.com/posts/${params.id}`)
    return { post: data }
  }
}
</script>

以上示例与先前介绍的动态路由非常类似，唯一的区别是我们在asyncData中获取数据，并将其用于服务端预渲染。