面试题：什么是 SSR？它解决了什么问题？Vue 项目如何实现 SSR？

1. 什么是 SSR？

SSR（Server-Side Rendering，服务端渲染）是指在服务器端将 Vue 组件渲染成 HTML 字符串，然后将其发送到客户端。客户端接收到 HTML 后，可以直接显示内容，而不需要等待 JavaScript 加载和执行。

2. SSR 解决了什么问题？

（1）SEO（搜索引擎优化）

问题：传统的单页应用（SPA）在客户端渲染时，初始 HTML 是空的，搜索引擎爬虫可能无法正确抓取页面内容。
解决：SSR 在服务器端生成完整的 HTML，使搜索引擎能够正确索引页面内容。

（2）首屏加载性能

问题：SPA 在首次加载时需要下载并执行大量 JavaScript，导致首屏加载时间较长。
解决：SSR 在服务器端生成 HTML，用户可以直接看到页面内容，提升首屏加载速度。

（3）用户体验

问题：SPA 在 JavaScript 加载完成前，页面是空白的，用户体验较差。
解决：SSR 提供即时的页面内容，提升用户体验。

3. Vue 项目如何实现 SSR？

Vue 提供了官方的 SSR 支持库 vue-server-renderer，以下是实现 SSR 的基本步骤：

（1）安装依赖

npm install vue vue-server-renderer express

（2）创建 Vue 应用

创建一个简单的 Vue 应用。

// src/app.js
import Vue from 'vue';

export function createApp() {
  const app = new Vue({
    data() {
      return {
        message: 'Hello, SSR!',
      };
    },
    template: `<div>{{ message }}</div>`,
  });

  return { app };
}

（3）创建服务器

使用 Express 创建一个服务器，并在服务器端渲染 Vue 应用。

// server.js
const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const fs = require('fs');

const server = express();

// 读取生成的 HTML 模板
const template = fs.readFileSync('./src/index.template.html', 'utf-8');

// 创建渲染器
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
  template,
});

// 处理所有路由
server.get('*', (req, res) => {
  const context = { url: req.url };

  // 渲染 Vue 应用为 HTML
  renderer.renderToString(context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(html);
  });
});

// 启动服务器
server.listen(8080, () => {
  console.log('Server is running on http://localhost:8080');
});

（4）创建 HTML 模板

创建一个 HTML 模板文件，用于插入渲染后的 Vue 应用。

<!-- src/index.template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue SSR</title>
</head>
<body>
  <!--vue-ssr-outlet-->
</body>
</html>

（5）构建配置

配置 Webpack 构建客户端和服务端代码。

// webpack.client.config.js
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');

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

// webpack.server.config.js
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');

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

（6）入口文件

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

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

const { app } = createApp();
app.$mount('#app');

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

export default context => {
  const { app } = createApp();
  return app;
};

（7）构建和运行

使用 Webpack 构建客户端和服务端代码，并启动服务器。

# 构建客户端代码
webpack --config webpack.client.config.js

# 构建服务端代码
webpack --config webpack.server.config.js

# 启动服务器
node server.js

4. 使用 Nuxt.js 简化 SSR

Nuxt.js 是一个基于 Vue 的 SSR 框架，可以大大简化 SSR 的实现过程。

（1）安装 Nuxt.js

npx create-nuxt-app my-ssr-app

（2）运行项目

cd my-ssr-app
npm run dev

（3）编写页面

在 pages 目录下创建 Vue 组件，Nuxt.js 会自动将其转换为 SSR 页面。

<!-- pages/index.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Nuxt.js!',
    };
  },
};
</script>

总结

SSR 的作用：
- 解决 SEO 问题。
- 提升首屏加载性能。
- 改善用户体验。
Vue 实现 SSR 的步骤：
1. 创建 Vue 应用。
2. 使用 vue-server-renderer 在服务器端渲染应用。
3. 配置 Webpack 构建客户端和服务端代码。
4. 启动服务器。
Nuxt.js：
- 提供开箱即用的 SSR 支持，简化开发流程。

通过 SSR，可以显著提升 Vue 应用的性能和 SEO 效果，适合需要高可用性和搜索引擎友好的项目。

THE END

Vue 进阶面试题