まず、SSRを扱えるようにするために、VueのSSRライブラリをインストールする必要があります。
npm install vue vue-server-renderer --save
次にノード・プログラムでは
// ステップ1：Vueインスタンスを作成する
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// ステップ2：レンダラーを作成する
const renderer = require('vue-server-renderer').createRenderer()
// ステップ3：VueインスタンスをHTMLにレンダリングする
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
// .5.0+，コールバック関数が渡されなければ、Promiseが返される：
renderer.renderToString(app).then(html => {
console.log(html)
}).catch(err => {
console.error(err)
})
その重要なステップは以下の通りです。
上記のステップから、いくつかの重要なAPIを導き出すことができます。
createRenderer renderToString.
上記のレンダリングされたhtmlはdivになり、正しくhtmlファイルに挿入する必要があります。
renderer.renderToString(app, (err, html) => { // html vueインスタンス用のhtmlデータを生成する。<div id='app'> </div>
// 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>
`)
})
})
上記の方法は面倒なので、createRendererが提供するテンプレート関数を使うことができます。
当初、レンダラーはパラメータを渡さずに createRenderer() で作成していました。現在は、オブジェクトのパラメータを渡すことができます。
const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8') // { template: '...' } を要約すると、テンプレート関数
})
renderer.renderToString(app, (err, html) => {
console.log(html) // html は、注入されたアプリケーションのコンテンツを含む完全なページになる。
})
テンプレートフォルダの中身を見てみましょう。
<html>
<head>
<!-- 二重中括弧を使ったHTMLエスケープ補間>
<title>{{ title }}</title>
<!-- 三重括弧を使ったHTMLのアンエスケープ補間>
{{{ meta }}}
</head>
<body>
<!--vue-ssr-outlet--> ((このコメントを省略しないように注意してほしい。）
</body>
</html>
補間は、renderingToString の際にコンテキストを渡すことで行うことができます。
const context = {
title: 'hello',
meta: `
<meta ...>
<meta ...>
`
}
renderer.renderToString(app, context, (err, html) => {
// ページのタイトルは "Hello "になる
// meta タグも
})
APIを要約すると
1. const renderer = require('vue-server-renderer').createRenderer({ template: '...' })
2. renderer.renderToString(app, context, (err, html) => {
...
})
