Matarialize中文社区-Vue 服务端渲染（SSR）与 Nuxt.js

Vue 服务端渲染（SSR）与 Nuxt.js

前端初学者 2024-09-14 06:47:36

209 SSR,Nuxt.js 专栏

一、Vue SSR（服务端渲染）的概念

Vue.js 默认是运行在客户端浏览器中的，也就是客户端渲染（CSR）。而**服务端渲染（Server-Side Rendering, SSR）**则是在服务器端生成 HTML，返回给客户端。与客户端渲染不同，SSR 直接在服务器生成完成的 HTML 页面，这样用户可以快速看到内容，而不是等到 JavaScript 在浏览器执行后再呈现页面。

Vue SSR 的优点：

SEO 优化：因为 SSR 生成的页面是完整的 HTML，搜索引擎可以直接爬取内容，改善 SEO。
首屏渲染速度快：SSR 提供更快的内容呈现，尤其是对于慢速网络连接。
更好的用户体验：由于页面内容先于 JavaScript 加载，用户不会遇到“白屏”问题。

二、Nuxt.js 的介绍

Nuxt.js 是基于 Vue.js 的一个高层框架，用于构建 SSR 应用和静态站点生成。Nuxt.js 内置了很多 SSR 的功能，使得开发者无需从零开始配置 Vue SSR。

Nuxt.js 主要提供以下功能：

服务器端渲染：简化了 SSR 的配置，自动完成服务端渲染。
静态站点生成：Nuxt.js 也可以将网站生成静态文件，适合内容较少的站点。
模块化架构：Nuxt.js 提供丰富的模块支持（如 SEO、PWA、身份认证等），大大提高了开发效率。
自动路由生成：Nuxt.js 自动根据 pages 文件夹生成对应的路由，无需手动配置。

三、Vue SSR 的实现

Vue SSR 需要一些配置，并且相比于客户端渲染的 Vue 应用复杂度会更高。下面我们来创建一个简单的 Vue SSR 项目。

1. 创建一个 Vue SSR 项目

首先，安装 Vue CLI 并创建一个 Vue 项目：

npm install -g @vue/cli
vue create vue-ssr-app

选择配置项，并进入项目目录。

2. 安装 `vue-server-renderer`

Vue SSR 依赖 vue-server-renderer 包，它是 Vue 提供的服务端渲染引擎。

npm install vue-server-renderer

3. 创建一个简单的 Vue SSR 服务器

在 Vue 项目中，创建一个新的文件夹 server，并添加以下文件：

server.js：作为 Node.js 服务入口。
app.js：创建 Vue 应用实例。

app.js 文件内容：

import Vue from 'vue';
import App from './src/App.vue';

export function createApp() {
  const app = new Vue({
    render: h => h(App)
  });
  return { app };
}

server.js 文件内容：

const express = require('express');
const { createRenderer } = require('vue-server-renderer');
const { createApp } = require('./app');

const server = express();
const renderer = createRenderer();

server.get('*', (req, res) => {
  const { app } = createApp();

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello SSR</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});

server.listen(8080, () => {
  console.log('Server is running at http://localhost:8080');
});

在此代码中，我们使用 vue-server-renderer 的 renderToString 方法将 Vue 实例渲染为 HTML 字符串，并通过 Express 将其发送给客户端。

4. 启动 SSR 服务器

在项目根目录下添加启动脚本，修改 package.json：

{
  "scripts": {
    "dev": "node server/server.js"
  }
}

然后运行：

npm run dev

此时，服务端渲染已经完成，你可以通过访问 http://localhost:8080 来查看 SSR 渲染的页面。

四、Nuxt.js 的项目实战

1. 初始化 Nuxt.js 项目

Nuxt.js 提供了极为方便的 SSR 配置，开发者可以通过简单的命令快速启动一个 SSR 项目。

安装 Nuxt CLI：

npx create-nuxt-app nuxt-ssr-app

在创建项目时，Nuxt.js 会向你询问一系列配置选项，如选择服务端渲染（SSR）、静态站点生成等。

? Project name: nuxt-ssr-app
? Programming language: JavaScript
? Package manager: npm
? UI framework: None
? Nuxt.js modules: Axios, PWA
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / Static)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json

选项 Rendering mode 选择 Universal (SSR / Static)，Deployment target 选择 Server (Node.js hosting)。

2. 项目结构

Nuxt.js 的默认项目结构如下：

nuxt-ssr-app/
├── assets/         # 静态资源目录
├── components/     # 组件目录
├── layouts/        # 布局目录
├── middleware/     # 中间件目录
├── pages/          # 页面目录，自动生成路由
├── plugins/        # 插件目录
├── static/         # 静态文件
├── store/          # Vuex 状态管理目录
├── nuxt.config.js  # Nuxt 配置文件
└── package.json    # 项目信息和依赖

3. 编写页面和组件

Nuxt.js 中的每个页面都是 Vue 组件，放置在 pages/ 目录下，并且 Nuxt.js 会自动根据文件结构生成对应的路由。

创建一个简单的页面：

touch pages/index.vue

index.vue 文件内容：

<template>
  <div>
    <h1>Welcome to Nuxt SSR App</h1>
    <p>This is a server-side rendered page.</p>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: 'Home Page',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'This is the home page of the Nuxt SSR app'
        }
      ]
    };
  }
};
</script>

<style>
h1 {
  color: #42b983;
}
</style>

Nuxt.js 会自动根据 pages/index.vue 文件生成 / 路由，并且会在服务器端渲染该页面。

4. 配置路由

Nuxt.js 的路由配置是自动完成的，不需要手动创建路由文件。每个 pages/ 目录中的 .vue 文件都会映射为路由。例如：

pages/index.vue -> /
pages/about.vue -> /about

你可以简单地在 pages/ 目录下创建 Vue 组件文件，Nuxt.js 会自动处理路由。

5. 使用 Vuex 进行状态管理

Nuxt.js 内置了对 Vuex 的支持，可以在 store/ 目录下创建 Vuex 模块。

在 store/index.js 文件中添加简单的状态管理：

export const state = () => ({
  counter: 0
});

export const mutations = {
  increment(state) {
    state.counter++;
  }
};

在页面组件中使用 Vuex：

<template>
  <div>
    <h1>Counter: {{ counter }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

6. 使用 Axios 进行数据请求

Nuxt.js 默认支持 Axios 插件，可以方便地在项目中使用。

在页面组件中使用 Axios 请求数据：

<template>
  <div>
    <h1>Nuxt SSR with Axios</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const posts = await $axios.$get('https://jsonplaceholder.typicode.com/posts');
    return { posts };
  }
};
</script>

asyncData 方法是 Nuxt.js 特有的，用于在页面渲染之前获取数据

，这些数据会在服务器端渲染时注入到页面中。

7. 启动 Nuxt.js 项目

在项目根目录下运行以下命令启动 Nuxt.js SSR 项目：

npm run dev

此时，你可以通过访问 http://localhost:3000 来查看 Nuxt.js 的 SSR 项目。

总结

Vue 的 SSR 提供了一个强大的工具，可以用于构建高性能、SEO 友好的应用。而 Nuxt.js 进一步简化了 SSR 的复杂性，提供了一套完整的 SSR 解决方案，包括路由、状态管理、数据获取等功能。在实际项目中，Nuxt.js 通过模块化设计和强大的插件系统，能让开发者快速上手并构建复杂的 SSR 应用。

评论区