Vue 服务端渲染(SSR)与 Nuxt.js

class SSR,Nuxt.js

一、Vue SSR(服务端渲染)的概念

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

Vue SSR 的优点:

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

二、Nuxt.js 的介绍

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

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

  1. 服务器端渲染:简化了 SSR 的配置,自动完成服务端渲染。
  2. 静态站点生成:Nuxt.js 也可以将网站生成静态文件,适合内容较少的站点。
  3. 模块化架构:Nuxt.js 提供丰富的模块支持(如 SEO、PWA、身份认证等),大大提高了开发效率。
  4. 自动路由生成: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-rendererrenderToString 方法将 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 应用。

评论区
评论列表
menu