Question

首先页面由服务器呈现，然后在客户端/浏览器端，Javascript脚本重新呈现整个页面！
我不认为这是应该如何，因为它是非常糟糕的用户体验。

我注意到的一件事是我的根元素的data-reactid属性由服务器呈现的是一些像.2t5ll4229s这样的哈希值，并且所有孩子都将其作为前缀，例如.2t5ll4229s.0（第一个孩子）。然而，在浏览器方面，data-reactid为根元素.0，第一个孩子为.0.0。
如果data-reactid真的是罪魁祸首，有没有办法为客户端和服务器端设置一个像eric123这样的选择值。

如果data-reactid不是罪魁祸首，我该怎么做才能使服务器和客户端呈现React无缝，即只有某些元素应该由客户端重新呈现，而不是一切！？

我的index-server-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'));

我正在使用react-router 1.0.0和React 0.13.3。

Answer 1

我们需要在服务器端序列化数据（或状态），并将其发送到客户端进行反序列化，否则客户端的数据与呈现服务器的时刻不同。它会重新加载肯定。一个例外：纯静态页面，在这种情况下，React建议我们使用renderToStaticMarkup

与renderToString类似，但这并没有创建额外的DOM属性，例如data-react-id，React在内部使用。如果你想将React用作一个简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省大量的字节。

那么，我们如何序列化 - 反序列化？这是一个简单的版本：在index-server-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>

React服务器端和客户端渲染不是无缝的

1 个答案: