ssr - Vue2 单独组件 SSR 实现方法？

Question

Vue2，能不能将一个单独组件用ssr做？

现有一个Vue2的项目，存在一个报告的页面，是个单独组件（里面有接口和子组件），单独路由。现在有个需求就想着将这个页面用ssr去做，但是我看了官方文档，没有单独组件去做ssr的示例。大佬们，有谁这样做过啊，求解答！！！

我不想把整个项目变成ssr，这样成本太高了，
另外还有构建部署时的处理办法，也请帮忙解答下！

Answer 1

我觉得应该不存在单独针对某个组件 SSR 的办法。

不过反过来说，既然你这个组件如此独立，那你开一个独立项目，把这个组件作为唯一的页面渲染出来，然后在新项目里 SSR 不就好了？

Answer 2

是的，Vue2 支持将单独组件进行 SSR（Server Side Rendering，服务器端渲染）。

Vue2 的官方文档确实没有提供单独的组件 SSR 的示例，但这并不意味着你不能这样做。你可以通过 Vue 的 renderToString 方法将单个组件渲染为字符串，然后在服务器端进行处理。

以下是一个简单的示例，展示了如何将 Vue2 的单个组件进行 SSR：

1. 安装必要的依赖：

npm install vue vue-server-renderer

2. 创建服务器端的入口文件（例如 server-entry.js）：

const Vue = require('vue')const serverRenderer = require('vue-server-renderer')const YourComponent = require('./path/to/your/component') // 引入你的组件const renderer = serverRenderer.createRenderer()function renderComponentToString(component, context) {  return new Promise((resolve, reject) => {    const app = new Vue({      data: context,      render: h => h(component)    })    renderer.renderToString(app, (err, html) => {      if (err) {        reject(err)      } else {        resolve(html)      }    })  })}module.exports = { renderComponentToString }

3. 在服务器端使用上述函数：

const express = require('express')const { renderComponentToString } = require('./server-entry')const app = express()app.get('/report-pdf', async (req, res) => {  const context = { /* 传递给组件的数据 */ }  const html = await renderComponentToString(YourComponent, context)  res.set('Content-Type', 'application/pdf')  res.send(convertToPDF(html)) // 假设 convertToPDF 是一个将 HTML 转换为 PDF 的函数})app.listen(3000, () => {  console.log('Server is running on port 3000')})

注意：上述示例仅为了展示 Vue2 如何将单个组件进行 SSR，并没有涉及 PDF 转换的具体实现。你可能需要使用像 html2canvas 和 jsPDF 这样的库来将 HTML 转换为 PDF。

此外，虽然 SSR 可以帮助你解决前后端渲染不一致的问题，但它也带来了额外的复杂性和性能开销。因此，在决定是否使用 SSR 时，需要权衡其优缺点。