Vue 3：如何为CMS引擎实现SSR+SPA混合渲染功能？

核心思路 #

因为你的场景没有预编译静态包，所有Vue视图/逻辑都是CMS动态产出，核心方向是服务端实时编译+客户端动态hydrate与路由扩展，流程如下：

1. 首次请求：服务端从CMS拉取当前页面的Vue代码 → 实时编译为组件 → SSR渲染HTML并注入组件代码/路由元信息 → 返回给客户端
2. 客户端接管：加载基础Vue运行时 → 读取注入的组件代码 → hydrate服务端渲染的DOM → 注册vue-router，后续跳转时动态从CMS拉取目标页面代码，扩展路由并实现无刷新导航

1. 服务端SSR实现（Node.js为例） #

1.1 依赖准备 #

安装核心依赖：

npm install vue @vue/server-renderer vue-template-compiler express

如果用Vue 3，替换为@vue/compiler-sfc和@vue/server-renderer（Vue 3服务端渲染API有细节变化）

1.2 动态编译与渲染逻辑 #

const express = require('express');
const Vue = require('vue');
const { createRenderer } = require('@vue/server-renderer');
const compiler = require('vue-template-compiler');

const app = express();
const renderer = createRenderer();

// 模拟从CMS拉取页面Vue代码的接口（实际替换为你的CMS API）
function getPageVueContent(path) {
  // 返回格式：{ template: '<div>...</div>', script: 'export default { ... }', style: '.foo { ... }' }
  if (path === '/') {
    return {
      template: '<div id="app"><h1>{{title}}</h1><router-link to="/about">去关于页</router-link></div>',
      script: `export default { data() { return { title: '首页' } } }`,
      style: `h1 { color: #2c3e50; }`
    };
  }
  if (path === '/about') {
    return {
      template: '<div id="app"><h1>{{title}}</h1><router-link to="/">回首页</router-link></div>',
      script: `export default { data() { return { title: '关于我们' } } }`,
      style: `h1 { color: #e74c3c; }`
    };
  }
}

app.get('*', async (req, res) => {
  try {
    const pageContent = getPageVueContent(req.path);
    if (!pageContent) {
      res.status(404).send('页面不存在');
      return;
    }

    // 编译模板为render函数
    const { render } = compiler.compileToFunctions(pageContent.template);

    // 执行脚本获取组件选项（生产环境必须用沙箱隔离，避免恶意代码）
    const scriptModule = {};
    // 示例用eval，生产环境建议用Node.js vm模块或专业沙箱库
    eval(`(function(module) { ${pageContent.script} })(scriptModule)`);
    const componentOptions = scriptModule.exports;
    componentOptions.render = render;

    // 创建Vue实例并SSR渲染
    const vueApp = new Vue({
      render: h => h(componentOptions)
    });
    const html = await renderer.renderToString(vueApp);

    // 组装最终响应，注入组件代码供客户端使用
    const finalHtml = `
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>${componentOptions.data().title}</title>
        <style>${pageContent.style}</style>
      </head>
      <body>
        ${html}
        <script id="page-vue-content" type="application/json">
          ${JSON.stringify(pageContent)}
        </script>
        <script src="/client-runtime.js"></script>
      </body>
    </html>
    `;

    res.send(finalHtml);
  } catch (err) {
    res.status(500).send('SSR渲染失败: ' + err.message);
  }
});

app.listen(3000, () => {
  console.log('服务启动在 http://localhost:3000');
});

2. 客户端SPA接管实现 #

2.1 客户端基础运行时（client-runtime.js） #

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 读取服务端注入的当前页面Vue代码
const pageContent = JSON.parse(document.getElementById('page-vue-content').textContent);

// 编译当前页面组件
const { render } = Vue.compile(pageContent.template);
const currentComponent = {
  ...(new Function('return ' + pageContent.script)()),
  render
};

// 初始化路由，注册当前页面
const routes = [
  { path: window.location.pathname, component: currentComponent }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

// 路由守卫：跳转时动态拉取目标页面代码并扩展路由
router.beforeEach(async (to, from, next) => {
  if (router.getRoutes().some(r => r.path === to.path)) {
    next();
    return;
  }

  // 从CMS拉取目标页面代码（实际替换为你的CMS API）
  const res = await fetch(`/api/page-content?path=${to.path}`);
  const targetPageContent = await res.json();

  // 编译目标组件
  const targetRender = Vue.compile(targetPageContent.template).render;
  const targetComponent = {
    ...(new Function('return ' + targetPageContent.script)()),
    render: targetRender
  };

  // 动态添加路由和样式
  router.addRoute({ path: to.path, component: targetComponent });
  const styleEl = document.createElement('style');
  styleEl.textContent = targetPageContent.style;
  document.head.appendChild(styleEl);

  next({ ...to, replace: true });
});

// 创建Vue实例并hydrate服务端渲染的DOM
new Vue({
  router,
  render: h => h(currentComponent)
}).$mount('#app', true); // 第二个参数true表示启用hydrate模式

3. CMS集成关键要点 #

• 代码存储格式：CMS需支持存储Vue组件的模板、脚本、样式三部分内容，建议提供带语法校验的可视化编辑器（如Monaco Editor）。
• 安全隔离：服务端和客户端执行动态代码时必须用沙箱隔离（服务端用Node.js vm模块，客户端用iframe或专业沙箱库），防止恶意代码执行。
• 缓存优化：服务端可根据页面ID或内容哈希缓存编译后的render函数；客户端可缓存已拉取的页面组件，减少重复请求。
• 样式兼容：如果用scoped样式，服务端渲染时需处理data-v-xxx前缀，确保客户端hydrate时样式与DOM匹配。
• Vue版本适配：Vue 3需调整为createSSRApp、@vue/compiler-sfc等API，核心逻辑一致但细节有变化。

4. 注意事项 #

• 性能优化：动态编译存在性能损耗，建议对高频页面做缓存，或在CMS端预编译组件代码（存储编译后的render函数）。
• SEO验证：用Google Search Console或第三方工具检查SSR渲染后的页面是否能被搜索引擎正常抓取。
• 错误处理：添加完善的错误捕获，比如服务端渲染失败时 fallback 到客户端渲染，客户端hydrate失败时重新渲染页面。

内容的提问来源于stack exchange，提问作者Shantanu Prasad