Matt-Esch/virtual-dom (以下、virtual-dom) で server-side rendering をためしたことを書く。

virtual-dom は Virtual DOM 実装のひとつ。server-side rendering は single page application などを server-side で rendering して配信するもの。

目的としては、昨日 (2016-02-03) で Cycle.js の server-side rendering に失敗したので、代わりに Cycle.js の一部である virtual-dom だけで server-side rendering を行ってみるため。

実装は Node.js && TypeScript 。詳細は package.json を参照。依存関係部分は次のとおりだ。

"dependencies": {
  "express": "^4.13.4",
  "htmlescape": "^1.1.0",
  "vdom-parser": "^1.2.1",
  "vdom-to-html": "^2.2.0",
  "virtual-dom": "^2.1.1"
},
"devDependencies": {
  "babel-cli": "^6.3.17",
  "babel-preset-es2015": "^6.3.13",
  "browserify": "^13.0.0",
  "intelli-espower-loader": "^1.0.1",
  "mocha": "^2.3.4",
  "power-assert": "^1.2.0",
  "typescript": "^1.7.5",
  "typings": "^0.6.3"
},

部分抜粋して紹介すると次のとおり。

• Web server として express
• client-side で復元すべき state を script 要素に埋め込むための htmlescape
• client-side で render する際の DOM to VDOM のための vdom-parser
• server-side で render する際の VDOM to HTML のための vdom-to-html
• diff/patch のための Virtual DOM として virtual-dom
• 2016-01-30 にも書いた型情報を取得するための typings

virtual-dom 関連の package は 2016-02-02 にまとめたものの一部を使っている。

ここまでは期待通りに動いている。まだ実用的な構成にまではなっていないので、もうすこしつくってみる。