使用 webpack 中的代码拆分在服务器端渲染组件

Question

我正在尝试使用 React、React Router 和 Webpack 库构建一个 webapp，并利用服务器端渲染。

现在，我有一个基本结构在工作 - 当我访问 URL 时，页面会在服务器上呈现，然后发送回客户端，React 会在客户端确认客户端呈现的输出与服务器上生成的内容相匹配，并且从那里接管。

我的问题是当我尝试打开必须异步加载组件的 URL 时。

当我访问一个必须异步加载依赖项的 URL 时，服务器会呈现包含所有依赖项的输出，但是当涉及到客户端时，React 呈现的标记不包括异步加载的组件，因此不同于服务器，我在控制台中收到错误提示

警告：React 尝试在容器中重用标记，但校验和无效。

我认为解决方案的方式是要么不在服务器上渲染异步加载的组件而失去服务器端渲染的好处，要么以某种方式告诉 React 忽略服务器和客户端之间的差异，而不是丢弃服务器的标记，因为我知道组件最终会被加载并且标记会匹配。

有没有其他人遇到过这个问题并知道什么是好的解决方案？

Answer 1

您还需要在客户端运行match 以加载所有路由组件。

https://github.com/rackt/example-react-router-server-rendering-lazy-routes 上有一个充实的示例。