yahoo/fluxible による SPA + Server Rendering の概観

Single Page Application + Server Rendering

yahoo/fluxible を使って、Single Page Application と Server Rendering の良いとこ取りのアーキテクチャを目指す。ある程度の複雑性と引き換えに、双方の利点で双方の欠点を打ち消し合うことができるため、全体的には良好なユーザーインタラクションを期待できる構成。

なぜ Single Page Application なのか

  • 画面遷移時するたびにJavaScript/CSS のパースと評価をしなくて良くなる
  • 画面遷移時のトランジションを柔軟に適用できる
  • 画面遷移をまたがった実装が可能になる(あくまで可能になるだけ)

なぜ Server Rendering するのか

  • 初期表示の Critical Rendering Path を短縮できる
  • SEO における保守信仰にやさしい()
  • 古いブラウザ・低性能マシンにやさしい

Isomorphic について

Single Page Application と Server Rendering を両立するため、Isomorphic なモジュールで構成される。Isomorphic 化によって環境別のブートストラップコードを除いて、各モジュールの中では Server, Client を意識しない実装を行えるようになる。



Isomorphic とは

  • Isomorphic Survival Guide を読もう!
  • 原点は Client でも Server でも同じ JavaScript コードを利用したいニーズ
  • 実行環境を問わない移植性という意味では Portability と競合してる気がする
  • たぶんどっちでもいい気がするけど、日本では Isomorphic という言葉が人気
  • 追記: Universal 派が出てきた。こっちのほうが日本人的にも分かりやすいよね...

対象モジュール

基本的に Node 環境、Browser 環境の両方で動くように作られているパッケージを選ぶ or 自作しながら組み合わせて全体と構築する。HTTP リクエストのように実行環境によって使える手段が異なる処理は、モジュール内の分岐で整合性が付けられている。

Flux について

Fluxible も Flux 実装のひとつであるため、Flux の基本構成として Component (View), Store, Action の 3つを基本とした構成となる。Flux の観点から言うと、Client と Server で同じ Flux を動作させていることになる。

Fluxible において Dispatcher は内部に隠蔽されているので割愛する

Context の共有



これらの同じコードで動作する2つの Flux は シリアライズ化された FluxibleContext という Flux の内部状態を示すオブジェクトを dehydraterehydrate によって Server-Client 間で共有している。これによって、Server-Client 間で一貫した動作を保証している。

FluxibleContext とは

  • Component を処理するときに使われた Store などの内部状態が入ったオブジェクト
  • Server はリクエストがあるたびに新しい FluxibleContext を生成する
  • JSON シリアライズしてから HTML に挿入して Server から Client に渡される
  • Client は FluxibleContext を元に HTML が生成されたときの状態で初期化する
  • provideContext によって Component の Context 内に Store や Action にアクセスする API が提供される
  • 詳しくは API: FluxibleContext | Fluxible

Server Rendering のアクティビティ



サマリー

  1. Server で HTML を生成し、実行時 Context を JSON で埋め込んで返す
  2. Client で HTML を視覚的にレンダリングする
  3. Client で Context から React Component の状態を復元する
  4. めでたし

Client Rendering のアクティビティ



サマリー

  1. Navigate Action をトリガーとして Routing 処理を実行する
  2. Server Rendering のときと同じ処理を実行する
  3. めでたし

最後に

yahoo/fluxible を使った SPA + Server Rendering の基本的な動作フローについて紹介した。具体的な実装は割愛しているが、flux-examples/chat at master · yahoo/flux-examples が全て入っている参考実装なので、ここに紹介した範囲の話ならこのサンプルを参考にすればよいだろう。

Fluxible は Context の一元的な管理・共有を目的として導入しているに過ぎず、React + Flux に依存した同様の SPA + Server Rendering 実装は他にも存在する。ただし Fluxible には fluxible-routerfluxible-plugin-fetchr といった拡張も提供されているため、SPA と Isomorphic をワンストップで実現しやすい点が強みだ。

acdlite/flummox も Context や Higher-Order Component を活かして、Fluxible と似たようなコンセプトを実現するコンパクトな実装なので参考になると思われる。


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search