とりあえず最短でvue2.0のServer Side Renderingを試すまでのメモ

  • 15
    いいね
  • 0
    コメント

vue2.0でSSR(Server Side Rendering)ができるようになったので試してみました。
最短でSSRを実行する環境を整えて、最小のコードでSSRを実行するところまでの手順とコードです。

必要環境

  • nodejs 4.x 以降
  • git

手順

vue-cliでプロジェクトの作成

vue-cliというテンプレートからプロジェクトを作ってくれる便利な公式ツールが存在します。
既にvue2.0に対応しているので、vue2.0+webpackのテンプレートからプロジェクトを作ります。

npm install -g vue-cli
vue init webpack-simple-2.0 my-project
cd my-project

dependenciesを編集してパッケージをインストール

vue2.0は現在alphaで頻繁にalphaのバージョンが上がっています。
最新のvueのバージョンに変更しておきます。

"dependencies": {
  "vue": "^2.0.0-alpha.5"  // ここのバージョンを最新に変更(執筆時点でalpha.5)
},

パッケージをインストールします。

npm i

追加のパッケージをインストール

SSRに必要なパッケージを追加でインストールします。

npm install --save json-loader vue-server-renderer vue-template-compiler 

webpack.config.js を編集

  1. json-loaderを追加(loadersのところに追加します)

    {
      test: /\.json$/,
      loader: 'json'
    },
    
  2. process.envにVUE_ENV="server"を追加

    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"',
          VUE_ENV: '"server"'   // この行を追加
        }
    }),
    

ソースコードを修正

SSRするコードに修正します。

src/main.js
import Vue from 'vue'
import { createRenderer } from 'vue-server-renderer'
import compiler from 'vue-template-compiler'
const renderToString = createRenderer().renderToString

// レンダリングするテンプレートの作成
var App = {
  template: '<div>hoge</div>'
}

// ここでテンプレートがコンパイルされてrenderToString()でレンダリングできるようになる(仮想DOMにコンパイルされる)
const res = compiler.compileToFunctions(App.template, {})
Object.assign(App, res)

// レンダリング
var vue = new Vue(App)
renderToString(vue, (err,str) => {
  console.log(str)
})

ビルドして実行

npm run build
node dist/bundle.js

vue-loaderも一応使えた

vue-loaderを使うこともできました。

気をつけなければならないのが、vueファイルからstyleを消す必要があるということです。
styleが存在すると実行時にwindowオブジェクトを参照しようとしてエラーになります。
scriptはあっても動作しますが、SSRの時に何か意味を持たせることができるのか不明です。

App.vue
<template>
  <div id="app">
    <h1>Hoge</h1>
  </div>
</template>
src/main.js
import Vue from 'vue'
import App from './App.vue'
import createRenderer from 'vue-server-renderer'
const renderToString = createRenderer().renderToString

var vue = new Vue(App)
renderToString(vue, (err,str) => {
  console.log(str)
})

参考