Riot.js v4 サーバーサイドレンダリング(SSR) #JavaScript

Riot.js Advent Calendar 2019 の19日目です。

SSR

スーパースペシャルレアだったり、ダブルスーパーレアではありません。
サーバーサイドレンダリングです。

使うかどうかは賛否両論ありますが、使えるようにはなっておいた方が良いので勉強します。

@riotjs/ssr

Riot.jsにもSSRの為のモジュールがあります。
@riotjs/ssr
インストールはnpm i -S @riotjs/ssr

情報量が少ない、というか全く見つからなかったので結構苦戦しました。
Readme.mdによると@riotjs/ssrに用意されているのは、以下の３種類。

render

import MyComponent from './my-component.riot'
import render from '@riotjs/ssr'

const html = render('my-component', MyComponent, { some: 'initial props' })

レンダリングした結果(HTML)を返します。

fragments

import MyComponent from './my-component.riot'
import {fragments} from '@riotjs/ssr'

const {html, css} = fragments('my-component', MyComponent, { some: 'initial props' })

レンダリングした結果からHTMLとCSSを分離して取得します。
というか、実際はレンダリング結果をそのまま返している。(HTML側が減らされている)

fragments

export const fragments = curry(createRenderer)(frags => frags)

default

export default curry(createRenderer)(({html}) => html)

register

import register from '@riotjs/ssr/register'

import MyComponent from './my-component.riot' // It will fail

// from now on you can load `.riot` tags in node
const unregister = register()

import MyComponent from './my-component.riot' // it works!

// normally you will not need to call this function but if you want you can unhook the riot loader
unregister()

Node.jsでRiotファイルを扱えるようにします。
以下のようにすることで別の拡張子も対応可能。

register({ exts: ['.riot', '.tag'] })

piratesを使ってrequireをジャックしています。
@riotjs/compilerを使ってcompileした結果を@babel/coreのtransformに食わせているだけです。
https://github.com/riot/ssr/blob/master/src/register.js

使ってみる

今回はWeb Serverにはexpressを使っています。
Riot.js v4 自分でRouterを作るで作ったサンプルと同じ様なことをSSRで実装します。

index.js

import { fragments } from '@riotjs/ssr';
import register from '@riotjs/ssr/register';
import express from 'express';

// 拡張子.riotを登録
register();

// Express Server
const app = express();
app.listen(4500);

// Router and SSR
const ssr = (file, obj) => {
  try {
    // Riotファイルをロード
    const tag = require(`./${ file || 'home' }.riot`).default;
    // レンダリング実施
    return fragments(tag.name, tag, { "params": obj });
  } catch (ex) {
    // エラーが発生した場合はエラーページへ
    return file !== 'notfound' ? ssr('notfound', ex) : {};
  }
};

// favicon.icoは無視
app.get('/favicon.ico', (req, res) => res.status(404).send(''));
// 全てのURLにマッチ
app.get('/*', (req, res) => {
  // 最初のパスはRiotファイル名とする
  let [ file, ...params ] = req.params['0'].split('/');

  // レンダリングを実施し、HTMLとCSSを取得
  const { html = '', css = ''} = ssr(file, params);

  // レンダリング結果を返す
  res.send(`<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>${ file || "Riot App" }</title>
  <style>${ css }</style>
</head>
<body>
${ html }
</body>
</html>`);
});

home.riot

<my-home>
  <nav>
    <ul>
      <li><a href="/hello">Hello</a></li>
      <li><a href="/goodbye">Goodbye</a></li>
      <li><a href="/greeting/hola">Hola</a></li>
      <li><a href="/greeting/adios">Adios</a></li>
      <li><a href="/hoge">hoge</a></li>
      <li><a href="/app">My APP</a></li>
      <li><a href="https://qiita.com/advent-calendar/2019/riotjs">通常リンク</a></li>
    </ul>
  </nav>
</my-home>

hello.riot

<my-hello>
  <p>Hello World!!</p>
</my-hello>

goodbye.riot

<my-goodbye>
  <p>Goodbye World!!</p>
  <style>
    p { color: red; }
  </style>
</my-goodbye>

greeting.riot

<my-message>
  <p>{ props.params[0].slice(0, 1).toUpperCase() }{ props.params[0].slice(1) } World!!</p>
</my-message>

notfound.riot

<my-notfound>
  <h3>Oops!!</h3>
  <h4>{ props.params.message }</h4>
  <pre>{ props.params.stack }</pre>
</my-notfound>

app.riot

<my-app>
  <p>{ state.message } World!!</p>
  <input type="button" value="Hello" onclick="{ greeting }">
  <input type="button" value="Goodbye" onclick="{ greeting }">
  <input type="button" value="Hola" onclick="{ greeting }">
  <input type="button" value="Adios" onclick="{ greeting }">
  <script>
    export default {
      state : {
        message : ""
      },

      onMounted(props, state) {
        state.message = "The";
        this.update();
      },

      greeting(e) {
        this.state.message = e.target.value;
        this.update();
      },
    }
  </script>
</my-app>

サーバー側なのでWebpackは使っていません。

package.json

{
  "name": "riotv4-ssr-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --ext js,riot --exec babel-node src/scripts/index.js"
  },
  "keywords": [],
  "author": "KAJIKEN <kentaro@kajiken.jp> (http://kajiken.jp)",
  "license": "MIT",
  "dependencies": {
    "@riotjs/compiler": "^4.5.4",
    "@riotjs/ssr": "^4.1.1",
    "express": "^4.17.1",
    "riot": "^4.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/node": "^7.7.4",
    "@babel/preset-env": "^7.7.6",
    "nodemon": "^2.0.2"
  }
}

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

動作確認とまとめ

サーバーサイドでレンダリングしている為、onMountedやonBeforeMountなどマウント時に動くJavaScript以外は効果ありません。(消えます)
マウント時に動いたJavaScriptは実行した結果がHTMLに反映された状態でクライアントに返ります。HTMLに変化のないものは効果ありません。

その代わりサーバーサイドレンダリングのため、curlでももちろん結果は取れます。（検索エンジンBOTに強い）

そして表示処理と転送サイズは小さいので、レガシー端末やモバイル端末には良いかもしれません。