4

ユーザーによるコメントのリストを表示するシンプルなアプリがあります。ユーザーがクリックされると、アプリが移動し/users/<id>、MongoDB からクエリされるユーザーの詳細を含む新しいページを表示する必要があります。そのロジックがどこにあるべきかを理解するのに苦労しています。

次のように、クライアントで反応ルーターを使用する例を見ました。

render((
<Router>
  <Route path="/" component={App}>
     <Route path="/user/:userId" component={User}/>
  </Route>
</Router>
), document.body)

ただし、サーバー側でも次のようにします。

<Route name="root" path="/" handler={require('./handlers/Root')}>

また、高速ルーティングを使用します。

app.get('/', function home (req, res, next) {
  res.render('layout', {
    reactHtml: React.renderToString(<App />)
  });
});

app.get('/user', function home (req, res, next) {
  res.render('layout', {
    reactHtml: React.renderToString(<User />)
  });
});

どちらが行く方法ですか？違いは何ですか？

4

2 に答える 2

2

多くの場合、React アプリケーションは最初はクライアント側のみであり、お気付きのようにノードにアタッチされています。API 呼び出しのみで、再レンダリングは不要です。

同型アプリもサーバー上で実行され、フォールバック (JS なし) や SEO およびソーシャル共有 (Facebook は HTML メタ タグを読み取る必要があります。これを実現するのはまったく簡単ではありません。サーバー レンダリングからハイドレートすることで、より深いページでのユーザー エクスペリエンスを高速化します。

サーバー側でレンダリングすることは、おそらく決して望まないでしょう。Reactのフルパワーを見逃しています。

https://github.com/erikras/react-redux-universal-hot-exampleのようないくつかの優れたボイラープレートを使用して、クライアントを起動します。

于 2015-11-05T03:23:28.667 に答える