React服务器端渲染和Webpack的延迟加载 [英] React server side rendering and lazy loading of webpack

问题描述

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

I am using server side rendering with lazy loading of Webpack 2.2.0 using import() method, and using babel-plugin-transform-ensure-ignore for server side only, everything runs without errors and perfectly working except one thing. when page is loaded I can see server side rendering, but when webpack calling my dynamic component, all page renders again, which is visible for users. I need to know how to handle such problems. I found it when saw that, my first line is

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

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

but when my lazy loaded components are parsed and executed whole content of my react root element removed and rendered again and my first element is <div data-reactroot>

希望有人可以帮助我.

提前谢谢！

注意

没有关于校验和的反应警告.

There is no react warning about checksum.

更新2/4/2017

这是我的应用标记

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

ID为app的

div是我的应用程序容器

div with id app is my react application container

更新3/4/2017

将标记更改为

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

最终对客户端找到的校验和做出反应，但出现此错误.

finally react on client found checksum, but I got this error.

React尝试重用容器中的标记，但校验和为 无效的.通常，这意味着您正在使用服务器呈现和 在服务器上生成的标记不是客户端 期待. 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>

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

which I think should generate same code!

推荐答案

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

After debugging I found issue which was connected with React Router. so Router element renders <!-- react empty --> if app using lazy loading with import, that's why my checksum of server side was mismatching.

因此请遵循此示例我修复了问题，并重新渲染. 现在我的代码看起来像这样.

So following to this example I fixed issue, with re-rendering. now my code looks like this.

match({ history, routes }, (error, redirectLocation, renderProps) => {
    ReactDOM.render(
           <Provider store={store}>
                <Router {...renderProps} />
           </Provider>, document.getElementById('app')
    )
})

这篇关于React服务器端渲染和Webpack的延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！