ํ์ฌ 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
});
์๋ค ์. ์ ๋ ๋งค์ผ vue๋ฅผ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ ๊ธฐ์ฌํ๊ณ ์ถ์ต๋๋ค. ์ฌ๊ธฐ์ ๊ธฐ์ฌ ํ์ ๋ ์ด๋ธ์ด ์์ต๋๋ค.
๊ฐ๋ฅํ ๊ฒฝ์ฐ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋๋ก ๋๊ตฐ๊ฐ ๋๋ฅผ ๋์ธ ์ ์์ต๋๊น?
(์ด๋ฏธ ์ค์น๋์ด ์์ผ๋ฉฐ ํ ์คํธ ๋ฐ ๋น๋๋ฅผ ์คํํ ์ ์์ต๋๋ค.)
์๋ ํ์ธ์, ์ด๊ฒ์ ๋ํ ์ ๋ฐ์ดํธ๊ฐ ์์ต๋๊น? ์ฌ์ ํ nuxt 2.14์์ ์๋ํ์ง ์์ต๋๋ค.
์๋ ํ์ธ์, ์ด๊ฒ์ ๋ํ ์ ๋ฐ์ดํธ๊ฐ ์์ต๋๊น? ์ฌ์ ํ nuxt 2.14์์ ์๋ํ์ง ์์ต๋๋ค.
+1
๊ทธ๋๋ ์๋์ด ์๋๋,
[email protected]
[email protected]
[email protected]
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๋ค ์. ์ ๋ ๋งค์ผ vue๋ฅผ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ ๊ธฐ์ฌํ๊ณ ์ถ์ต๋๋ค. ์ฌ๊ธฐ์ ๊ธฐ์ฌ ํ์ ๋ ์ด๋ธ์ด ์์ต๋๋ค.
๊ฐ๋ฅํ ๊ฒฝ์ฐ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋๋ก ๋๊ตฐ๊ฐ ๋๋ฅผ ๋์ธ ์ ์์ต๋๊น?
(์ด๋ฏธ ์ค์น๋์ด ์์ผ๋ฉฐ ํ ์คํธ ๋ฐ ๋น๋๋ฅผ ์คํํ ์ ์์ต๋๋ค.)