react+rails+サーバーサイドレンダリングで開発してますよメモ②

react-railsのコンパイルというかリロードがマジ遅い

普通に3s位かかる。
おそらくこれはrailsのweblickのせいじゃなくてwebpackのbuildの速さなのではないかと予想。
webpackのbuild用にプラグインを追加 webpackで差分ビルドをする
developmentモードではwebサーバをweblick(rails server)からthinに変更

reactコンポーネントでSSRするものがたくさんありすぎて管理できない問題

みたいに沢山コンポーネントを登録していったらキリがないと思ったけど、page用のパーツを切り出せばよかった。
例えば/books/pages/show.jsxのようなファイルを作ってインポートする。
こうやるとスッキリする

export とかの詳細はこっち → MDNのexportの説明

react-rails内でのassets imageの参照をどうするか

Railsアプリrootの/frontendsディレクトリにreactのsrcを置いており、webpackを用いてapp/assets/javascripts/components/App[Mobile].bundle.jsxにコンポーネント群を置いている。
この場合、コンポーネント内のassetsのパスをどうするかで悩んでいる。
もともとdigestを付けずにpubic配下に置いてそこを参照しようとしていた。
しかし、アプリケーションに対するリクエストが増えるため却下。

対応策の候補としては以下があげられる。
①コンポーネントのpropsとして画像のパスを渡す(一番簡単)
②react-assets-pathとかのgemを使う?
③npmのmoduleを使う
後読み! Using webpack to build React components and their assets

①に関して
実際コンポーネントに渡す画像(ロゴとか矢印とか)が多くないためpropsに

のように渡す。
これが今のところ一番の候補。

②③これは調査なう

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク