reactjs - React 服务器端渲染和 webpack 的延迟加载

Question

我正在使用服务器端渲染，并使用 import() 延迟加载 Webpack 2.2.0方法，并使用babel-plugin-transform-ensure-ignore仅对于服务器端，一切都运行没有错误并且完美工作，除了一件事。 当页面加载时，我可以看到服务器端渲染，但是当 webpack 调用我的动态组件时，所有页面都会再次渲染，这对用户是可见的。 我需要知道如何处理此类问题。 我看到它时发现了它，我的第一行是

<div data-reactroot="" data-reactid="1" data-react-checksum="-1269702275">

但是当我的延迟加载组件被解析并执行时，我的 react 根元素的全部内容被删除并再次呈现，我的第一个元素是 <div data-reactroot>

希望有人能帮助我。

提前致谢!

注意

没有关于校验和的 react 警告。

2017 年 2 月 4 日更新

这是我的应用程序标记

<div id="app">
    <div>
        <%- body %>
    </div>
</div>

ID 为 app 的 div是我的 react 应用程序容器

更新 2017 年 3 月 4 日

在我将标记更改为

之后

<div id="app"><%- body %></div>

最终对客户端找到的校验和使用react，但我收到了此错误。

React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

(client) <!-- react-empty: 1 -

(server) <div data-reactroot="

我的客户端根元素是

<Provider store={store}>
    <Router history={history} routes={routes} onUpdate={() => window.scrollTo(0, 0)}/>
</Provider>

服务器是

<Provider store={store}>
    <RouterContext {...renderProps} />
</Provider>

我认为应该生成相同的代码!

Answer 1

您报告的行为听起来不规则。

您是否使用任何 webpack 插件来删除控制台中的警告？

为了找出发生了什么，我将从调试 React 的 ReactMount.js 中的 canReuseMarkup 函数开始，以查找客户端生成的校验和是否与在服务器上生成的一个。

重新渲染后没有显示校验和的原因 正如查理·马什 (Charlie Marsh) 在 here 中提到的那样:

If you inspect a React component that's been rendered on the server (i.e., generated with renderComponentToString), you'll notice that it has an unfamiliar attribute, data-react-checksum, which you won't have seen on client-side components. Stepping one level deeper into the addChecksumToMarkup function reveals that data-react-checksum is an Adler-32 checksum generated from the HTML markup and appended to any component rendered server-side.