Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ SSR ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π½Π΅ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ (ΠΏΠΎΠ΄) ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ, Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΊ HTML-ΡΠ΅Π³Π°ΠΌ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
// Step 1: Create a Vue instance
const Vue = require("vue");
const Test = {
template: `<div>This should be red</div>`
}
const app = new Vue({
template: `
<div>
<Test v-make-red/>
<div v-make-red>This is red</div>
</div>
`,
components: {
Test
}
});
const makeRed = (node, dir) => {
const style = node.data.style || (node.data.style = {});
if (Array.isArray(style)) {
style.push({ backgroundColor: "red" });
} else {
style.backgroundColor = "red";
}
};
// Step 2: Create a renderer
const renderer = require("vue-server-renderer").createRenderer({
directives: {
makeRed
}
});
// Step 3: Render the Vue instance to HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err;
console.log(html);
// <div data-server-rendered="true"><div>This should be red</div> <div style="background-color:red;">This is red</div></div>
// But should include red background-color style for the first div as well
});
ΠΠΎ ΡΠ΅ΠΌΠ΅: https://github.com/nuxt/nuxt.js/issues/6575
ΠΡΠΈΠ²Π΅Ρ ΡΠ΅Π±ΡΡ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ vue Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½ΠΎ ΠΈ Ρ
ΠΎΡΡ Π²Π½Π΅ΡΡΠΈ ΡΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄. Π― Π²ΠΈΠΆΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΠ»ΡΠΊ.
ΠΌΠΎΠΆΠ΅Ρ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΌΠ½Π΅, ΡΡΠΎΠ±Ρ Ρ ΠΌΠΎΠ³ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ?
(Ρ ΡΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» ΡΠΎΡΠΊ ΠΈ ΠΌΠΎΠ³Ρ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΡΠ΅ΡΡ ΠΈ ΡΠ±ΠΎΡΠΊΡ.)
ΠΡΠΈΠ²Π΅Ρ, Π΅ΡΡΡ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ? Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ nuxt 2.14
ΠΡΠΈΠ²Π΅Ρ, Π΅ΡΡΡ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ? Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ nuxt 2.14
+1
ΠΠΎ ΡΠΈΡ
ΠΏΠΎΡ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ,
[email protected]
[email protected]
[email protected]
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠΈΠ²Π΅Ρ ΡΠ΅Π±ΡΡ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ vue Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½ΠΎ ΠΈ Ρ ΠΎΡΡ Π²Π½Π΅ΡΡΠΈ ΡΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄. Π― Π²ΠΈΠΆΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΠ»ΡΠΊ.
ΠΌΠΎΠΆΠ΅Ρ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΌΠ½Π΅, ΡΡΠΎΠ±Ρ Ρ ΠΌΠΎΠ³ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ?
(Ρ ΡΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» ΡΠΎΡΠΊ ΠΈ ΠΌΠΎΠ³Ρ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΡΠ΅ΡΡ ΠΈ ΡΠ±ΠΎΡΠΊΡ.)