使用 webpack 中的代码拆分在服务器端渲染组件
Rendering components on the server side with code splitting in webpack
我正在尝试使用 React、React Router 和 Webpack 库构建一个 Web 应用程序，并利用服务器端渲染。
现在，我有一个基本的工作结构 - 当我访问 URL 时，页面在服务器上呈现，发送回客户端，React 确认在客户端呈现的输出与在服务器上生成并从那里接管的内容。
我的问题是当我尝试打开必须异步加载组件的 URL 时。
当我访问一个必须异步加载依赖项的 URL 时，服务器呈现包含所有依赖项的输出，但是当涉及到客户端时，React 呈现的标记不包括异步加载的组件，因此与服务器的不同，我在控制台中收到一个错误，上面写着
Warning: React attempted to reuse markup in a container but the checksum was invalid.
在我看来，解决方案要么不在服务器上渲染异步加载的组件并失去服务器端渲染的好处，要么以某种方式告诉 React 忽略服务器和客户端之间的差异，并且不会丢弃服务器的标记，因为我知道组件最终会被加载并且标记会匹配。
有没有其他人遇到过这个问题并且知道什么是好的解决方案？
您还需要 运行 match 在客户端加载所有路由组件。
https://github.com/rackt/example-react-router-server-rendering-lazy-routes.
提供了一个充实的示例
我正在尝试使用 React、React Router 和 Webpack 库构建一个 Web 应用程序，并利用服务器端渲染。
现在，我有一个基本的工作结构 - 当我访问 URL 时，页面在服务器上呈现，发送回客户端，React 确认在客户端呈现的输出与在服务器上生成并从那里接管的内容。
我的问题是当我尝试打开必须异步加载组件的 URL 时。
当我访问一个必须异步加载依赖项的 URL 时，服务器呈现包含所有依赖项的输出，但是当涉及到客户端时，React 呈现的标记不包括异步加载的组件，因此与服务器的不同，我在控制台中收到一个错误，上面写着
Warning: React attempted to reuse markup in a container but the checksum was invalid.
在我看来，解决方案要么不在服务器上渲染异步加载的组件并失去服务器端渲染的好处，要么以某种方式告诉 React 忽略服务器和客户端之间的差异，并且不会丢弃服务器的标记，因为我知道组件最终会被加载并且标记会匹配。
有没有其他人遇到过这个问题并且知道什么是好的解决方案？
您还需要 运行 match 在客户端加载所有路由组件。
https://github.com/rackt/example-react-router-server-rendering-lazy-routes.
提供了一个充实的示例