React / Hypernova + Rails で SSR 速習会

React / Hypernova + Rails で SSR 速習会 2017/11/14 @Wantedly

@3846masa 明治大学大学院修士1 年 8 月頃から Wantedly インターン生就職活動中です

ハンズオンセットアップ Requirements Node.js >= v8 Ruby >= 2.3.0 Postgresql https://github.com/wantedly/rails-react-
demo/pull/5 git clone --depth 1 -b study-start https://github.com/wantedly/rails-react-demo bin/setup && npm i or bin/setup && yarn ./db/seeds.sh

ハンズオンは SSR の説明後に始まりますセットアップしつつ聴いてください

New Wantedly frontends Server-side Rendering Hypernova, CSS in JS etc.
RESTful API + BFF-like API ActiveModelSerializer Dynamic import webpack, Routing etc. TypeScript, and so on...

Server-side Rendering Client 側でレンダリングすると JavaScript の読み込みが終わるまで表示されない Server 側でレンダリングして結果を送るのが SSR SEO
対策 First Meaningful Paint の改善 Ref. https://speakerdeck.com/yosuke_furukawa/you-need-to- know-ssr

First Meaningful Paint (FMP) ユーザにとって意味ある表示がされたタイミング図では右から2 番目の状態 https://developers.google.com/web/updates/2017/06/user- centric-performance-metrics

FMP の改善あらかじめ HTML をレンダリングして返す JavaScript を読み込む前に表示できる Critical Rendering Path
を最適化するクライアントのレンダリングに必要な情報を極力少ないリクエストで返すようにする

Critical Rendering Path <html> <head><link href="style.css" rel="stylesheet"></head> <body><p>Hello World!</p></body> </html>
https://developers.google.com/web/fundamentals/performanc e/critical-rendering-path/analyzing-crp

CSS はレンダリングブロックリソース外部 CSS を呼び出すと、ラウンドトリップが発生ラウンドトリップ中はレンダリングが止まる
https://developers.google.com/web/fundamentals/performanc e/critical-rendering-path/render-blocking-css ブラウザは、DOM と CSSOM の両方が揃うまでレンダリングをブロックします。

Server-side CSS Rendering SSR でリクエストされたページに必要な分だけ CSS を生成して一緒に配信するインライン CSS
でリクエスト（ラウンドトリップ）を少なくあらかじめ HTML + CSS を送ることで JavaScript が読み込まれる前でも閲覧できる

Server-side Rendering

Hypernova airbnb 製の React SSR 用ライブラリ hypernova-react でレンダリング hypernova-ruby で
Node.js から受け取る https://github.com/airbnb/hypernova

Hypernova // サーバ側とクライアント側の関数を作る export default hypernova({ server: () =>
(state) => { const html = ReactDOMServer.renderToString(<App/>); return hypernova.serialize("App", html, state); }, client: () => { const [{ node, data }] = hypernova.load('App'); ReactDOM.hydrate(<App/>, node); } }); <%= render_react_component "App", @react_state %> <%= javascript_include_tag 'main' %>

Rails + Hypernova Fail-safe な設計 Node.js サーバが落ちても Client JS
だけで動く非インタラクティブなページは Rails のみにできる単純なページは Rails + erb でサクッと書ける

Hypernova を試す

ハンズオンを起動しよう 3 つのスクリプトを動かす bundle exec rails s yarn start webpack
による Client JS のビルド yarn run hypernova Hypernova による SSR サーバ今回は nodemon + babel-node で動かす https://localhost:3000/projects にアクセス

First meaningful paint を体感 Chrome の DevTools で帯域幅を絞ってみる Network ->
Online を Slow 3G に変更段階的に表示されていくはずヘッダー（Rails） Top Page 見出し（Client JS）プロジェクト一覧（API Request） SSR 後と比較するために HTML ソースを見ておく

Hypernova を導入 https://github.com/wantedly/rails-react- demo/commit/39f9f238aaa2df1a0e3626c747bda 36cb59aba8e app/views/application/ssr.html.erb <%= render_react_component "App", @react_state
%> <div id="root"></div> @react_state については後述

Hypernova を導入 https://github.com/wantedly/rails-react- demo/commit/39f9f238aaa2df1a0e3626c747bda 36cb59aba8e frontend/src/index.jsx const results = hypernova.load("App");
if (results.length === 0) { return; } const { node, data } = results[0];

もう一度ソースを見てみるリロードしてソースを確認する HTML の記述が増えているはずでも、表示はガタガタ HTML（Rails
+ Hypernova）スタイルシート（Client JS） CSS も SSR で配信する必要がある

SSR with CSS

SSR と CSS React の SSR は JavaScript で実行される CSS
を JavaScript として読む必要がある CSS を JS として読み込む方法 CSS in JS を使う CSS Modules でトランスパイルする今回は CSS in JS を使っていきます

CSS in JS JavaScript のオブジェクトとして CSS を書く const styles =
{ base: { width: 640, margin: 'auto', fontSize: '1.5rem' } }; const Component = () => (<div style={styles.base} />); React の style はこの形式トランスパイルせずに Isomorphic なコンポーネントを作れる

react-with-styles ThemedStyleSheet.registerTheme({ color: { black: '#212121' } }); const App
= ({ styles }) => ( <h1 {...css(styles.header)}>Hello World!</h1> ); export default withStyles(({ colors }) => ({ header: { fontWeight: 600, color: colors.black } }))(App); https://github.com/airbnb/react-with-styles

CSS in JS も Hypernova https://github.com/wantedly/rails-react- demo/commit/39f9f238aaa2df1a0e3626c747bda 36cb59aba8e frontend/src/index.jsx //
return markup; return `${style}\n${markup}\n${classNames}`; 再読込するとどうなるかスタイルも適応した表示が最初に出る（Rails + Hypernova + CSS in JS）

余談 | CSS Modules 普段の CSS 記法で書いたものを import する import
style from './style.css'; CSS 自体を Webpack などでトランスパイルする Server-side でもトランスパイルする必要がある isomorphic にするのが難しい SSR + CSS Modules したいときは？ kriasoft/isomorphic-style-loader Webpack の loader で isomorphic に変換

API の話

API 設計 API を RESTful に保ちながら SSR を実現したい Ref. https://wantedly.connpass.com/event/55138/
Web / ネイティブアプリで共通化 SPA-like な React 設計にすれば共通化できる SSR でページをレンダリングするためには複数のデータを一括で呼び出したい Backends for Frontends のような考えかた RESTful API & BfF-like API を提供したい

ActiveModelSerializers ActiveModel から JSON API を作成できる app/serializers/project_serializer.rb より抜粋 class ProjectSerializer
< ApplicationSerializer attributes :id, :title, :published_at attribute(:canonical_path) { "/projects/#{object.id}" } belongs_to :company has_one :image end 詳しくは以前の速習会 https://wantedly.connpass.com/event/55138/ を参照

API 設計クエリパラメタで eld や association を設定 http://localhost:3000/api/v2/projects? fields=title,description http://localhost:3000/api/v2/projects?
fields=canonical_path 必要なデータだけを取ってくる View に依存しない API 設計 https://wantedly.connpass.com/event/55138/

React の initialState を作る SSR するときの初期データをどう用意するか Hypernova は初期データを渡せる
( @react_state ) ActiveModelSerializers を流用したい controller / action ごとに必要な elds を定義しておく app/views/projects/index.yml ActiveModuleSerializers 経由で JSON を作る ReactStateRenderer を作る lib/react_state_renderer.rb

Mock を置き換えよう https://github.com/wantedly/rails-react- demo/commit/625a1023e40162e430acd6d4e423 8d1e9097cc0b lib/react_state_renderer/controller_helpers.rb ReactStateRenderer.new( data, request: request,
controller: controller_name, action: action_name, global: react_global_state, ).perform

YAML を変えて JSON を変化 app/views/projects/index.yml を編集してみる http://localhost:3000/projects.json でデータが見えます
拡張機能で JSON を見やすくしておくと便利 http://bit.ly/1oY4wxc

State 管理

現在の Redux state { projects: { index: { projects: [
{ id: 123, company: {...}, description: '...' }, { id: 456, company: {...}, description: '...' }, ], filter: { ... } } } }

データを再利用するページを遷移時に API ロードに時間がかかる Slow 3G にしてペー
ジ遷移してみるロードが終わるまで何も表示されない... orz 一覧ページ → 詳細ページならデータが既にあるタイトルやサムネイル情報は一覧ページでも詳細ページでも使う

normalizr API などからのデータを Entity にわける例） post と post.author
を post + author に Entity の形式は同じになるため、データが重複しない例) posts[0].author と posts[2].author が同じデータが形式立って一箇所にまとまるので管理しやすい追加のデータを merge するのとかが楽 https://github.com/paularmstrong/normalizr

normalize { id: 10, title: 'Post Title', tags: [ {
id: 8, name: 'awesome' } ] } { result: 10, entities: { posts: { 10: { id: 10, title: 'Post Title', author: 8 } }, tags: { 8: { id: 8, name: 'awesome' } } } }

denormalize normalize の逆でデータを元に戻す denormalize(1, ProjectsSchema, entities); { id: 10,
title: 'Post Title', tags: [ { id: 8, name: 'awesome' } ] }

ActiveModel と normalizr ActiveModel と normalizr scheme を対応させて自動で normalize
したい再帰的に normalize をかける今回の API では _entity_type に ActiveModel のモデル名を入れて対応させる See frontend/src/common/utils/normalizer.js

normalizr を設定しよう commit/4b147052052ae340b5a451b37e534d9c 0f5e18b0 frontend/src/common/utils/generateStateFromAPIData.js import { normalize } from
"./normalizer"; const { result: currentState, entities } = normalize(initial.body); const state = Object.assign({}, initial.global, { entities }); /* ... */ state[initial.controller][initial.action] = currentState;

reselect で denormalize https://github.com/wantedly/rails-react- demo/commit/4b147052052ae340b5a451b37e5 34d9c0f5e18b0 frontend/src/projects/components/RootContainer.jsx projects: projectsSelector(state), frontend/src/projects/components/ProjectContainer.jsx
project: projectSelector(state, ownProps),

reselect frontend/src/projects/selectors/projectsSelector.js export const projectSelector = createSelector( // 必要なデータを抽出
[ (_state, ownProps) => ownProps.match.params.id, state => state.entities ], // 抽出データから denormalize (projectId, entities) => denormalize(projectId, ProjectSchema, entities) );

最終的な Redux state { entities: { projects: [ { id:
1, author: 10, content: '...' } ], user: [ { id: 10, name: 'John Smith' } ], ... }, projects: { index: { projects: [ 1, 8, 10, ... ], filter: { ... } } } }

データが再利用できているか一旦一覧ページでリロード（データ初期化）一覧ページ →
詳細ページを表示してみる Slow 3G で表示してみるタイトルやサムネイルは最初から表示されている API 読み込みが終わると全部表示される

Immutable.js 変更すると新しいオブジェクトを返す // ESnext const newState = { ...prevState, title:
'New' }; // Immutable.js const newState = prevState.set('title', 'New'); mergeDeep で深い階層まで新しいオブジェクトに const normalized = normalize(apiData, apiSchema); const newState = prevState.mergeDeep(normalized); https://facebook.github.io/immutable-js/

Immutable.Record Record 型でクラス化できるモデル構造（型情報）を持てるメソッドを持てる class Post extends
Immutable.Record({ title: '', tags: Immutable.List(), }) { public readonly title: string; public readonly tags: Immutable.List; addTag(tag) { return this.set('tags', this.tags.push(tag)); } }

normalizr + Immutable.js const normalized = normalize(apiData, apiSchema); const entities
= fromJS(normalized.entities); // Convert object to Immutable.Record entities.map((entitiesMap, key) => { return entitiesMap.map(val => new Records[key](val)); }); const newState = prevState.deepMerge({ entities }); // Get post record whose id is 10 const post = denormalize(10, Post, state.entities); post.title; // typeof string post.tags.get(0); // instanceof Tag const newPost = post.addTag('awesome');

Routing

Routing 必要なコンポーネントだけを読み込みたい Dynamic import import('./App').then(({ default: App }) =>
{ ... }); Dynamic import と React Component を合わせる const route = { loader: () => import('./ProjectContainer') }; <AsyncComponent route={route} />

AsyncComponent class AsyncComponent extends React.Component { componentDidMount() { const {
route } = this.props; route.loader().then(({ default: App }) => { this.view = App; this.forceUpdate(); }); } render() { const { route, ...rest } = this.props; const Component = this.view || 'div'; return <Component {...rest} />; } }

Dynamic import + SSR ReactDOMServer.renderToString は非同期を待たない import() が待機されないあらかじめ import()
をすべて読みこんでおく Hypernova の getComponent は非同期 async getComponent() { await Promise.all(routes.map((r) => r.loader())); return Component; }

Dynamic import してみる https://github.com/wantedly/rails-react- demo/commit/96073c316992d68b373af8fc5f2b3 a5a7f6b1556 frontend/src/router.jsx import ... from
を消して import(...) にする new AsyncRoute({ path: "/projects", loader: () => import("./projects/router"), }),

Dynamic import してみる commit/96073c316992d68b373af8fc5f2b3a5a7f 6b1556 frontend/src/index.jsx if (matchedRoute) { await
matchedRoute.load(); } hypernova.js await preloadAll(); return Component;

Code splitting via webpack Code splitting でページごとにスクリプトを分割する webpack
は import() 構文から自動で Code splitting する機能がある静的解析なため、 import(scriptName) のような変数をつかった読み込みには対応していない https://webpack.js.org/guides/code-splitting/#dynamic- imports

React + webpack 環境 create-react-app をベースに環境構築 Code splitting などは標準で付いている
eject で webpack の設定を書き換えられる HMR や SSR 、CSS Modules は入っていない必要なものだけ別途設定する今回 SSR は webpack を使わない HMR は gaearon/react-hot-loader を利用

TypeScript の導入静的型をつけることでコード補完を充実させる DEMO CSS in JS Redux の
Action も補完が効くように switch - case 文で型推論される DEMO Action の補完 Immutable.Record を使うと Entity のプロパティに補完が効くようになる DEMO Immutable.Record のコード補完

まとめ Hypernova で React + Rails の SSR CSS in
JS で First Meaningful Paint の改善 State は ActiveModelSerializers で生成 ActiveModel から RESTful API と BfF-like API normalizr と Immutable.js で Entity 管理 Dynamic import で Component を遅延読み込み webpack による Code splitting TypeScript で型のある幸せな世界へ

Thanks

React / Hypernova + Rails で SSR 速習会

React / Hypernova + Rails で SSR 速習会

Other Decks in Technology

Featured

Transcript