Vue SSR 잘라먹기 - Getting started
설치
npm install vue vue-server-renderer --saveVue 인스턴스 렌더링
// Step 1: Create a Vue instance
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// Step 2: Create a renderer
const renderer = require('vue-server-renderer').createRenderer()
// 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">Hello World</div>
})
// in 2.5.0+, returns a Promise if no callback is passed:
renderer.renderToString(app).then(html => {
console.log(html)
}).catch(err => {
console.error(err)
})서버와 통합시키기
npm install express --save
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>The visited URL is: {{ url }}</div>`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)페이지 템플릿 사용
index.template.html:<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
renderer.renderToString(app, (err, html) => {
console.log(html) // will be the full page with app content injected.
})
템플릿 보간(인터폴레이션)
<html>
<head>
<!-- use double mustache for HTML-escaped interpolation -->
<title>{{ title }}</title>
<!-- use triple mustache for non-HTML-escaped interpolation -->
{{{ meta }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>renderToString:const context = {
title: 'hello',
meta: `
<meta ...>
<meta ...>
`
}
renderer.renderToString(app, context, (err, html) => {
// page title will be "Hello"
// with meta tags injected
})템플릿은 다음의 장점들을 가지고 있다:
1. *.vue 컴포넌트를 사용할 때, 강력한 CSS를 자동으로 입력시킬 수 있다.
2. clientManifest를 사용하면 asset을 연결하거나 resource의 힌트를 자동으로 입력시킬 수 있다.3. client-side hydration을 위해서 vuex state를 사용할 때, 자동으로 삽입하거나 XSS 방지를 할 수 있다.
댓글
댓글 쓰기