將標題重寫為：在Vue 3中，如何使用SSR將資料從Node.js傳遞

Question

我正在使用vue.js3建立一個網站，我想使用伺服器端渲染。我還想能夠從我的fastify（或express）伺服器傳遞資料給vue.js3。有沒有辦法可以做到這一點（我看到了一個叫做express-vue的東西：github鏈接，但它是為vue2而不是官方的，所以我不知道它是否好用）？而且你能否包含客戶端的hydration，因為我看到了一些例子，像是https://github.com/mod

P粉336536706 · Answer

您可以將上述內容翻譯成中文：

您可以将上下文对象传递给renderToString函数
const context = { data: 'Hello world' } // 您想要共享的数据
const html = renderToString(App, context)

在Vue组件中，可以使用useSSRContext来访问此对象
setup() {
    if (typeof window === 'undefined') {
        const context = useSSRContext()
        console.log(context.data) // Hello world
    }
}

与Vue 2不同，您无需在
中添加data-server-rendered="true"，当您在浏览器上使用createSSRApp而不是createApp时，Vue 3会自动进行客户端渲染

要在浏览器中传递对象，您需要在从服务器返回结果时将其写入中的window变量中
const html = renderToString(App, context)

res.send(`
    
    
        
    
        ${html}
        
    
`)