【Vue.js进阶】8、服务端渲染（SSR）与 Nuxt.js 简介

【Vue.js进阶】服务端渲染（SSR）与 Nuxt.js 简介

---

Vue.js进阶系列文章导航

【Vue.js进阶】1、深入响应式原理
【Vue.js进阶】2、Vue Router：构建单页应用的路由系统
【Vue.js进阶】3、Vuex：状态管理的最佳实践
【Vue.js进阶】4、组合式API：使用 Composition API 构建复杂组件
【Vue.js进阶】5、插件与自定义指令
【Vue.js进阶】6、单元测试与端到端测试
【Vue.js进阶】7、性能优化：提升你的 Vue 应用速度
【Vue.js进阶】8、服务端渲染（SSR）与 Nuxt.js 简介（本文）
【Vue.js进阶】9、国际化：多语言支持
【Vue.js进阶】10、与第三方库的集成：Axios、Lodash等

---

在本篇文章中，我们将详细介绍 Vue.js 的服务端渲染（SSR）和 Nuxt.js。SSR 可以有效提升应用的性能和 SEO，而 Nuxt.js 是一个基于 Vue.js 的框架，为我们提供了强大的 SSR 支持和许多便利功能。我们将从基本概念开始，逐步深入，最终构建一个简单的 SSR 示例。

1. 服务端渲染（SSR）概述

什么是服务端渲染（SSR）

服务端渲染（Server-Side Rendering，简称 SSR）是指在服务器端生成 HTML 内容，并将其发送到客户端浏览器显示的过程。与客户端渲染（Client-Side Rendering）相比，SSR 可以显著提高首屏加载速度和 SEO。

SSR 的优势

• 更好的 SEO：搜索引擎可以更容易地抓取和索引预渲染的 HTML 内容。
• 更快的首屏加载时间：用户可以更快地看到页面内容，因为服务器预渲染了 HTML。

SSR 的挑战

• 开发复杂度增加：需要在服务器端和客户端同步状态。
• 服务器负载增加：服务器需要额外的计算资源来渲染页面。

2. 使用 Vue.js 实现 SSR

配置 Vue SSR

Vue 提供了官方的 Vue Server Renderer 插件，可以帮助我们实现 SSR。

安装依赖

npm install vue-server-renderer express

创建服务器

在项目根目录下创建 server.js 文件：

// server.js
const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const serverBundle = require('./dist/vue-ssr-server-bundle.json');
const clientManifest = require('./dist/vue-ssr-client-manifest.json');
const template = require('fs').readFileSync('./src/index.template.html', 'utf-8');

const app = express();

const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template,
  clientManifest
});

app.use('/dist', express.static('./dist'));

app.get('*', (req, res) => {
  const context = {
    url: req.url
  };

  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found');
      } else {
        res.status(500).end('Internal Server Error');
      }
    } else {
      res.end(html);
    }
  });
});

const port = 8080;
app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

修改 Webpack 配置

我们需要配置 Webpack 来打包客户端和服务器端的代码。创建 webpack.client.config.js 和 webpack.server.config.js 文件：

// webpack.client.config.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.config');
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');

module.exports = merge(baseConfig, {
  entry: './src/entry-client.js',
  plugins: [
    new VueSSRClientPlugin()
  ]
});

// webpack.server.config.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.config');
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');

module.exports = merge(baseConfig, {
  entry: './src/entry-server.js',
  target: 'node',
  output: {
    libraryTarget: 'commonjs2'
  },
  plugins: [
    new VueSSRServerPlugin()
  ]
});

修改项目入口文件

创建客户端和服务器端的入口文件：

// src/entry-client.js
import { createApp } from './main';

const { app, router } = createApp();

router.onReady(() => {
  app.$mount('#app');
});

// src/entry-server.js
import { createApp } from './main';

export default (context) => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp();

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }
      resolve(app);
    }, reject);
  });
};

3. Nuxt.js 简介

什么是 Nuxt.js

Nuxt.js 是一个基于 Vue.js 的高级框架，旨在通过抽象化复杂配置和提供开箱即用的功能来简化开发流程。它内置了 SSR 支持，并提供了丰富的功能，如自动代码分割、静态站生成、强大的路由系统等。

安装 Nuxt.js

npx create-nuxt-app my-nuxt-app

Nuxt.js 的目录结构

my-nuxt-app
├── assets
├── components
├── layouts
├── middleware
├── pages
├── plugins
├── static
├── store
├── nuxt.config.js
└── package.json

创建页面

Nuxt.js 使用文件系统路由，每个 pages 目录中的文件会自动生成对应的路由。

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <nuxt-link to="/about">About</nuxt-link>
  </div>
</template>

<!-- pages/about.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <nuxt-link to="/">Home</nuxt-link>
  </div>
</template>

配置文件

nuxt.config.js 是 Nuxt.js 的配置文件，可以配置应用的各种参数。

// nuxt.config.js
export default {
  ssr: true,
  target: 'server',
  head: {
    title: 'My Nuxt App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  css: [],
  plugins: [],
  components: true,
  buildModules: [],
  modules: [],
  build: {}
};

4. 小结

通过本篇文章，我们了解了 Vue.js 的服务端渲染（SSR）和 Nuxt.js 的基本概念和使用方法。我们从 SSR 的优势和挑战入手，介绍了如何使用 Vue.js 实现 SSR，并简要介绍了 Nuxt.js 及其强大的功能。希望这篇文章对你有所帮助。

---

这里是爪磕~感谢您的到来与关注，持续为您带来高质教学！Happy coding! 🎉