【React.js】サーバサイドで生成したReactコンポーネントをブラウザで再描画するときの処理

勘違い訂正とか

  • Node.jsだとDOMに描画するギリギリまでReactで表現することで、サバクラを同じコードで記述する、Isomorphicというパラダイムが適用できる。
    • renderToString でサーバ側でComponentからHTML生成できる。

      Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

      If you call React.render() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

# NodeサーバでHTML文字列を作るときはこんな感じで突っ込む
html = React.renderToString Foo { items: setA }
res.render 'hoge', { data: html }
  • （Deprecated ?） renderComponentToString
  • 結論から言うと、サーバで生成したHTMLViewテンプレートをクライアント側で一旦捨てて、再構築するようなことは無い。
  • ただし、サーバーサイドから再描画せずにComponentを適用したい場合、イニシャルビューでrenderToStringする際に使った引数と同じ引数を教えてやる必要がある。
// server side
var markup = React.renderToString(
  TweetsApp({
    tweets: tweets
  })
);
res.render('home', {
  markup: markup, // Pass rendered react markup
  state: JSON.stringify(tweets) // Pass current state to client side
});


// client side
React.render(
  <TweetsApp tweets={initialState} />,
  document.getElementById('react-app')
);

Tips

参考