Tulis semula tajuk sebagai: Cara menghantar data daripada Node.js menggunakan SSR dalam Vue 3

Question

Saya sedang membina tapak web menggunakan vue.js3 dan saya mahu menggunakan pemaparan sebelah pelayan. Saya juga mahu dapat menghantar data ke vue.js3 dari pelayan fastify (atau ekspres) saya. Adakah terdapat cara saya boleh melakukan ini (saya melihat sesuatu yang dipanggil pautan express-vue: github, tetapi ia untuk vue2 dan bukan rasmi, jadi saya tidak tahu sama ada ia bagus)? Dan bolehkah anda memasukkan penghidratan pelanggan kerana saya melihat beberapa contoh seperti https://github.com/mod

P粉336536706 · Answer

Anda boleh menterjemah kandungan di atas ke dalam bahasa Cina:

您可以将上下文对象传递给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}
        
    
`)