首页 文章

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

提问于
浏览 次
7

首先，页面由服务器呈现，然后在客户端/浏览器端，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 .

express reactjs react-router

1 回答

  • 1

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

    与renderToString类似，但这不会创建额外的DOM属性，例如React在内部使用的data-react-id . 如果你想将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>
    回复于

相关问题