サーバー側とクライアント側のレンダリングがシームレスではない

最初にページがサーバーによってレンダリングされ、クライアント/ブラウザ側では、Javascriptスクリプトがページ全体を再レンダリングします。
これは非常に悪いユーザーエクスペリエンスなので、これがどのようになっているのかとは思いません。サーバー側とクライアント側のレンダリングがシームレスではない

私が気づいたことの1つは、サーバによってレンダリングされるような私のルート要素のdata-reactid属性が.2t5ll4229sのようなハッシュであり、すべての子供が接頭辞としてそれを持っているということです。 .2t5ll4229s.0（最初の子）。一方、ブラウザ側では、data-reactidはルート要素では.0、最初の子では.0.0です。
ここでdata-reactidが本当に犯人である場合、クライアント側とサーバー側の両方でeric123のような選択値を設定する方法があります。

ここでdata-reactidが原因ではない場合、Reactシームレスのサーバー側とクライアント側のレンダリングを行うにはどうすればよいですか？つまり、すべてのものではなくクライアント側で特定の要素のみをレンダリングする必要があります。

私のインデックスサーバーlocal.htmlテンプレート：

... 
<body> 
    <div id="content" class="container-fluid wrapper no-padding-left no-padding-right"> 
     {{{reactHtml}}} 
    </div> 
    <script src="bundle.js"></script> 
</body> 
...

マイserver.js：

server.get('*', function (req, res) { 
     console.log('request url', req.url); 
     log.debug('routes are', JSON.stringify(routes)); 
     res.header("Access-Control-Allow-Origin", "*"); 
     match({routes, location: req.url}, (error, redirectLocation, renderProps) => { 
    if (renderProps) { 
     let htmlStr = React.renderToString(<RoutingContext {...renderProps} />); 
     res.render('index-server-local', { reactHtml: htmlStr });  
    } 
}

マイbrowser.js：

React.render(<Router history={history} routes={routeConfig} />, document.getElementById('content'));

私は反応ルータ1.0.0と反応0.13.3を使用しています。

出典

2016-04-26 ericn

サーバー側でデータ（または状態）をシリアル化してクライアント側に送信してデシリアライズする必要があります。それ以外の場合、クライアント側のデータはサーバーのレンダリング時と異なります。それは確かに再ロードされます。は一つの例外：このが反応が内部で使用していること、余分なDOMは、データに反応-IDなどの属性を作成しません除いて、純粋な静的なページ、この場合には、私たちはrenderToStringにrenderToStaticMarkup

同様の使用をお勧めします反応します。余分な属性を取り除くことで、たくさんのバイトを節約することができるので、Reactを単純な静的ページジェネレータとして使用する場合に便利です。

私たちはどのようにシリアライズするのですか？逆シリアル化しますか？あなたのインデックスサーバーlocal.htmlテンプレートで：

<script src="bundle.js"></script>

に：ここは、単純なバージョンがある

<script dangerouslySetInnerHTML={{{{__html: 'window.__data=' + JSON.stringify({key: 'value'})}}}} /> 
    <script src="bundle.js"></script>

とクライアント側では、我々は今__datadata使用することができます。あなたの選択に基づいてデータをコンポーネントにマッピングする方法。

私はこのためReudxをお勧めします。

createStore(browserHistory, initialState)

そして

<Provider store={store}> 
    { component } 
    </Provider>

出典

2016-04-26 09:51:14

おかげ@デビッド関、私は、サーバーからブラウザにそのことについて心配する値を渡していないための方法を持っています。しかし、最初にサーバー側でハッシュ接頭辞を取得するにはどうすればよいでしょうか？私はあなたが話していることを理解していない、シリアライゼーションとデシリアライゼーションがここで私を助けることができる方法 – ericn

@eric 'ハッシュプレフィックス'。あなたはhashHistoryを使用していますか？それはサーバー側のレンダリングでは機能しません。 – Nal

サーバー側とクライアント側のレンダリングがシームレスではない

答えて

関連する問題