使用ssr时如何将数据从node js传递到vue 3

Question

我正在使用 vue.js 3 构建网站，我想使用服务器端呈现。我还希望能够将数据从我的 fastify（或 express）服务器传递到 vue.js 3. 有什么办法可以做到这一点（我看到过一些叫做 express-vue 的东西：github link but it is for vue 2 and isn't official so I don't know if it is good or not)? And also can you include client side hydration because I have seen examples like https://github.com/moduslabs/vue3-example-ssr 但它不包括客户端水合作用，如果这不可能，我将只使用 ejs，但我更喜欢 vue 3。你能给我一个云使用的示例或模板吗？提前谢谢你！

Answer 1

您可以将上下文对象传入 renderToString

const context = { data: 'Hello world' } // Data you want to share
const html = renderToString(App, context)

可以使用 useSSRContext

在 Vue 组件中访问此对象

setup() {
    if (typeof window === 'undefined') {
        const context = useSSRContext()
        console.log(context.data) // Hello world
    }
}

与需要将 data-server-rendered="true" 添加到 <div id="app"> 的 Vue 2 不同，当您使用 createSSRApp 而不是 createApp浏览器。

要在浏览器中传递对象，您需要在从服务器

返回结果时将其写入<head>中的一个window变量

const html = renderToString(App, context)

res.send(`
    <html>
    <head>
        <script>window.context = ${JSON.stringify(JSON.stringify(context))}</script>
    </head>
        <body><div id="app">${html}</div></body>
        <script src="main.js"></script>
    </html>
`)

使用ssr时如何将数据从node js传递到vue 3

How to Pass data from node js to vue 3 when using ssr

vue.js

server-side-rendering

vuejs3