next.jsとnuxt.jsとAngular Universalを触ってみた

server side rendering(ssr)を試したかったので、ssrを比較的簡易に実行できると思われるUniversal Javascriptに対応しているライブラリを簡単に比較してみた。

実行環境

• MacBook Air (13-inch, Mid 2012)
• node v7.9.0
• Typescript 2.2.0

next.js

React用のUniversal Javascriptライブラリ。ここでは、https://github.com/zeit/next.js/tree/master/examples/hello-world を試す。

git clone https://github.com/zeit/next.js.git 
cd next.js/examples/hello-world/ 
npm install
./node_modules/next/dist/bin/next build
./node_modules/next/dist/bin/next start

ファイル

index.js

import Link from 'next/link'
export default () => (
  <div>Hello World. <Link href='/about'><a>About</a></Link></div>
)

about.js

export default () => (
  <div>About us</div>
)

転送量

251KB

nuxt.js

Vue用のUniversal Javascriptライブラリ。ここでは、 https://github.com/nuxt/nuxt.js/tree/master/examples/hello-world を試す。

git clone https://github.com/nuxt/nuxt.js 
cd nuxt.js/examples/hello-world 
npm install 
node_modules/nuxt/bin/nuxt build 
node_modules/nuxt/bin/nuxt start

ファイル

index.vue

<template>
  <div>
    <h1>Welcome!</h1>
    <nuxt-link to="/about">About page</nuxt-link>
  </div>
</template>

about.vue

<template>
  <div>
    <p>Hi from {{ name }}</p>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  asyncData ({ req }) {
    return {
      name: req ? 'server' : 'client'
    }
  }
}
</script>

転送量

56.1KB

Angular Universal

Angular用のUniversal Javascriptライブラリ。まだ公式にangular-cliとAngular Universalが対応していないようなので、ここでは、 universal-cliを用いてサンプルアプリを作成する。

npm install -g universal-cli rxjs
ung new angular-universal 
cd angular-universal
ung build --prod
ung serve --prod

ファイル

(ungコマンドによる自動生成ファイル。下記以外も多数生成される)

app.component.html

<h1>
  {{title}}
</h1>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

転送量

215KB (jsはgzip済)

印象

nuxt.jsのファイルサイズの小ささが素晴らしい（ただし、謎に読み込んでいるindex付きのbundleが何をしているか不明なので後で調べたい）。いずれのライブラリも、ssrを意識しなくても普通にレンダリングまで可能なのが凄い。例えばnuxt.jsはexpressに依存しているけれど、hello worldのみだと一行もサーバサイド専用のコードが存在しない。(nuxt-linkというvue-routerに類似したタグが使われているが、これでサーバ側でのルーティングとクライアント側でのルーティングを一元管理しているようだ)。

時間があったらredux or vuex周りとの連携も試したい。