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

IT技术 reactjs webpack redux lazy-loading server-side
2021-05-26 02:30:17

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

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

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

希望可以有人帮帮我。

提前致谢！

笔记

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

更新 2/4/2017

这是我的应用标记

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

带有 id 的 divapp是我的react应用程序容器

更新 3/4/2017

在我将标记更改为

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

终于对客户端找到的校验和做出react，但我收到了这个错误。

React 尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器渲染并且服务器上生成的标记不是客户端所期望的。React 注入了新的标记来补偿哪些有效，但您已经失去了服务器渲染的许多好处。相反，找出为什么在客户端或服务器上生成的标记不同：

(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>

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

2个回答

您报告的行为听起来不正常。

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

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

正如查理·马什 (Charlie Marsh) 在这里提到的，在重新渲染后没有显示校验和的原因：

如果您检查在服务器上呈现的 React 组件（即使用 生成renderComponentToString），您会注意到它有一个陌生的属性 data-react-checksum，这是您在客户端组件中不会看到的。深入研究该addChecksumToMarkup函数的一层会发现 data-react-checksum 是从 HTML 标记生成的 Adler-32 校验和，并附加到任何在服务器端呈现的组件。

调试后我发现了与 React Router 相关的问题。所以如果应用程序使用延迟加载，Router元素会呈现，这就是为什么我的服务器端校验和不匹配的原因。<!-- react empty -->import

所以按照这个例子我修复了问题，重新渲染。现在我的代码看起来像这样。

match({ history, routes }, (error, redirectLocation, renderProps) => {
    ReactDOM.render(
           <Provider store={store}>
                <Router {...renderProps} />
           </Provider>, document.getElementById('app')
    )
})
其它你可能感兴趣的问题
上一篇如何在 react.js 的一个组件中导入 bootsrap 下一篇带有 ReactJS 的 SonarQube - 对新代码的重复和覆盖的误报