Vue 2 中 SSR 的原理、实现方法及优势介绍

SSR（Server-Side Rendering，服务端渲染）是一种将页面渲染过程从客户端转移到服务器端的技术。它主要解决了以下问题：

1. SEO（搜索引擎优化）：传统的单页应用（SPA）在客户端渲染时，搜索引擎爬虫可能无法正确解析和索引页面内容，而 SSR 可以在服务器端生成完整的 HTML，便于搜索引擎抓取。

2. 首屏加载性能：SPA 在首次加载时需要下载大量的 JavaScript 文件，并在客户端执行渲染，这可能导致较长的白屏时间。SSR 在服务器端生成完整的 HTML，用户可以直接看到渲染好的内容，提升首屏加载速度。

3. 低性能设备支持：对于一些低性能设备（如旧版手机或平板），客户端渲染可能会导致卡顿或无法正常使用。SSR 可以在服务器端完成渲染，减轻客户端的负担。

SSR 的实现方法

在 Vue 2 中，可以通过以下步骤实现 SSR：

1. 安装依赖：
   首先需要安装 vue-server-renderer 和 express（或其他 Node.js 服务器框架）：

   npm install vue-server-renderer express
   

2. 创建 Vue 实例：
   在服务器端创建一个 Vue 实例，并导出供渲染使用：

   // app.js
   import Vue from 'vue';
   import App from './App.vue';
   
   export function createApp() {
     const app = new Vue({
       render: h => h(App)
     });
     return { app };
   }
   

3. 创建服务器：
   使用 express 创建一个服务器，并在请求时渲染 Vue 实例：

   // server.js
   const express = require('express');
   const { createBundleRenderer } = require('vue-server-renderer');
   const fs = require('fs');
   const path = require('path');
   
   const server = express();
   
   const template = fs.readFileSync(path.resolve(__dirname, './index.template.html'), 'utf-8');
   const serverBundle = require('./dist/vue-ssr-server-bundle.json');
   const clientManifest = require('./dist/vue-ssr-client-manifest.json');
   
   const renderer = createBundleRenderer(serverBundle, {
     template,
     clientManifest
   });
   
   server.use('/dist', express.static(path.resolve(__dirname, './dist')));
   
   server.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);
       }
     });
   });
   
   server.listen(8080, () => {
     console.log('Server is running on port 8080');
   });
   

4. 构建配置：
   使用 Webpack 分别构建客户端和服务端的入口文件：

   // webpack.client.config.js
   const { VueLoaderPlugin } = require('vue-loader');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     entry: './src/entry-client.js',
     output: {
       filename: '[name].js',
       path: path.resolve(__dirname, './dist')
     },
     module: {
       rules: [
         {
           test: /\.vue$/,
           loader: 'vue-loader'
         }
       ]
     },
     plugins: [
       new VueLoaderPlugin(),
       new HtmlWebpackPlugin({
         template: './index.template.html'
       })
     ]
   };
   
   // webpack.server.config.js
   const { VueLoaderPlugin } = require('vue-loader');
   
   module.exports = {
     entry: './src/entry-server.js',
     target: 'node',
     output: {
       filename: 'server-bundle.js',
       libraryTarget: 'commonjs2'
     },
     module: {
       rules: [
         {
           test: /\.vue$/,
           loader: 'vue-loader'
         }
       ]
     },
     plugins: [
       new VueLoaderPlugin()
     ]
   };
   

5. 客户端激活：
   在客户端入口文件中，使用 hydrate 方法激活 Vue 实例：

   // entry-client.js
   import { createApp } from './app';
   
   const { app } = createApp();
   
   app.$mount('#app');
   

6. 服务端入口：
   在服务端入口文件中，导出 Vue 实例：

   // entry-server.js
   import { createApp } from './app';
   
   export default context => {
     const { app } = createApp();
     return app;
   };
   

总结

SSR 通过将页面渲染过程从客户端转移到服务器端，解决了 SEO、首屏加载性能和低性能设备支持等问题。在 Vue 2 中，可以通过 vue-server-renderer 和 Webpack 实现 SSR，并结合 express 或其他服务器框架提供服务。