服务端渲染（SSR）的概念、原理及其在Vue项目中的高级配置和实战应用，包括Node.js环境搭建、服务器端数据预取、SEO优化策略等。

1. 服务端渲染（SSR）的概念与原理

什么是服务端渲染（SSR）？

服务端渲染（Server-Side Rendering, SSR）是指在服务器端将 Vue 组件渲染为 HTML 字符串，然后将其发送到客户端。与传统的客户端渲染（CSR）不同，SSR 在服务器端生成完整的 HTML 页面，客户端接收到后可以直接显示，无需等待 JavaScript 下载和执行。

SSR 的优势

1. SEO 优化：搜索引擎可以抓取完整的 HTML 内容，提升搜索排名。

2. 首屏加载速度更快：用户无需等待 JavaScript 加载和执行即可看到页面内容。

3. 更好的用户体验：减少白屏时间，提升用户感知性能。

SSR 的原理

1. 服务器端渲染：

   • 服务器接收到请求后，运行 Vue 应用并生成 HTML 字符串。

   • 将生成的 HTML 发送到客户端。

2. 客户端激活：

   • 客户端接收到 HTML 后，Vue 会接管页面并激活交互功能。

   • Vue 会将静态 HTML 转换为动态 DOM，绑定事件和数据。

Vue 项目中的 SSR 实现

 Vue 提供了官方的 SSR 支持库 vue-server-renderer，结合 Node.js 可以实现 SSR。

        1. Node.js 环境搭建

首先，确保已安装 Node.js 和 Vue CLI。

# 安装 Vue CLI
npm install -g @vue/cli

# 创建 Vue 项目
vue create my-ssr-app
cd my-ssr-app

        2. 安装 SSR 依赖 

npm install vue-server-renderer express

        3. 创建服务器端入口文件

在项目根目录下创建 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, './public/index.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, {
  runInNewContext: false,
  template,
  clientManifest
});

server.use(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 http://localhost:8080');
});

        4. 修改客户端入口文件

在 src 目录下创建 entry-client.js 和 entry-server.js 文件。

entry-client.js：

import { createApp } from './main';

const { app, router } = createApp();

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

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);
  });
};

        5. 修改 Webpack 配置

在项目根目录下创建 vue.config.js 文件，配置 Webpack：

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
const nodeExternals = require('webpack-node-externals');
const merge = require('lodash.merge');

const TARGET_NODE = process.env.WEBPACK_TARGET === 'node';
const target = TARGET_NODE ? 'server' : 'client';

module.exports = {
  configureWebpack: () => ({
    entry: `./src/entry-${target}.js`,
    target: TARGET_NODE ? 'node' : 'web',
    output: {
      libraryTarget: TARGET_NODE ? 'commonjs2' : undefined
    },
    externals: TARGET_NODE ? nodeExternals({ whitelist: /\.css$/ }) : undefined,
    optimization: {
      splitChunks: TARGET_NODE ? false : undefined
    },
    plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
  }),
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return merge(options, {
          optimizeSSR: false
        });
      });
  }
};

        6. 构建和运行 

# 构建客户端和服务端代码
npm run build

# 启动服务器
node server.js

服务器端数据预取

在 SSR 中，数据预取是确保页面内容完整的关键步骤。可以通过 asyncData 方法在组件中预取数据。

export default {
  asyncData({ store, route }) {
    return store.dispatch('fetchData', route.params.id);
  }
};

在 entry-server.js 中调用 asyncData： 

import { createApp } from './main';

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

    router.push(context.url);

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

      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({ store, route: router.currentRoute });
        }
      })).then(() => {
        context.state = store.state;
        resolve(app);
      }).catch(reject);
    }, reject);
  });
};

SEO 优化策略

1. 动态 Meta 标签：在组件中动态设置 <meta> 标签，提升 SEO 效果。

export default {
  metaInfo() {
    return {
      title: this.pageTitle,
      meta: [
        { name: 'description', content: this.pageDescription }
      ]
    };
  }
};

1. 预渲染：对于静态页面，可以使用预渲染生成静态 HTML 文件。

2. 使用 vue-meta 插件：方便管理页面的 Meta 信息。

npm install vue-meta

import VueMeta from 'vue-meta';
Vue.use(VueMeta);

总结

服务端渲染（SSR）通过服务器端生成 HTML 提升 SEO 和首屏加载速度。在 Vue 项目中，结合 Node.js 和 vue-server-renderer 可以实现 SSR，并通过数据预取和 SEO 优化进一步提升应用性能。