recherche

Maison  >  Questions et réponses  >  le corps du texte

Réécrivez le titre comme suit : Comment transmettre des données depuis Node.js en utilisant SSR dans Vue 3

<p>Je crée un site Web à l'aide de vue.js 3 et je souhaite utiliser le rendu côté serveur. Je souhaite également pouvoir transmettre les données de mon serveur fastify (ou express) vers vue.js 3. Existe-t-il un moyen de faire cela (j'ai vu quelque chose appelé express-vue: lien github, mais c'est pour vue 2 et non officiel, donc je ne sais pas si c'est bon) ? Et pouvez-vous inclure l'hydratation du client, car j'ai vu quelques exemples comme https://github.com/moduslabs/vue3-example-ssr mais cela n'inclut pas l'hydratation du client, si ce n'est pas possible j'utiliserais ejs, mais je préfère la vue 3. Pouvez-vous me donner un exemple ou un modèle ? Merci d'avance! </p>
P粉078945182P粉078945182486 Il y a quelques jours648

répondre à tous(1)je répondrai

  • P粉336536706

    P粉3365367062023-08-26 09:55:40

    Vous pouvez traduire le contenu ci-dessus en chinois : 

    <p>您可以将上下文对象传递给renderToString函数</p>
<pre><code>const context = { data: 'Hello world' } // 您想要共享的数据
const html = renderToString(App, context)
</code></pre>
<p>在Vue组件中，可以使用useSSRContext来访问此对象</p>
<pre><code>setup() {
    if (typeof window === 'undefined') {
        const context = useSSRContext()
        console.log(context.data) // Hello world
    }
}
</code></pre>
<p>与Vue 2不同，您无需在<div id="app">中添加data-server-rendered="true"，当您在浏览器上使用createSSRApp而不是createApp时，Vue 3会自动进行客户端渲染</p>
<hr />
<p>要在浏览器中传递对象，您需要在从服务器返回结果时将其写入<head>中的window变量中</p>
<pre><code>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>
`)
</code></pre>

    répondre
    0
  • Annulerrépondre