reactjs - 使用 devextreme 和 Material ui @react16 进行服务器端渲染

Question

刷新页面(并浏览我的 ssr)后，看起来没有任何 css 是持续的，除非我导航我的应用程序并返回它，甚至单击某些元素。有没有例子说明如何正确完成此操作？

我使用与受控“react Material ui grid”示例完全相同的代码:

https://github.com/kkotwal94/DrivingService (develop分支) <- 其中组件位于components/demoBase下，SSR位于server/render/pageRender.jsx下。我使用 Material ui 示例来说明如何完成此操作。我在 Students.jsx 中使用演示网格。

这是刷新后发生的情况的图片:

在生产模式和开发模式下，其他所有内容(所有其他页面)都呈现良好。我不知道我在这里缺少什么。看来 jss-in-css 映射不正确。

我发现恢复到React 16之前的一切都开始工作了，SSR什么的，但是我不能使用dx-react-grid项目，因为它需要16。有点疯狂，仍在调查我哪里出错了。

测试

http://transportation.kkotwal.me/ 我托管了它，如果你点击登录，你可以使用 yea@yea.com 登录，密码:123，或者你也可以直接注册，用户名必须是电子邮件，没关系。之后，如果您导航到导航上的学生按钮(如果您在登录后单击交通跟踪器，您应该返回到根页面/ View )。您将看到开发极端控制网格示例。

如果你在该页面上点击刷新，你会看到所有的 CSS 都困惑了。如果您不确定该页面是什么:http://transportation.kkotwal.me/students 。来源在这里:https://github.com/kkotwal94/DrivingService/tree/UpdateReact 。服务器端渲染位于 https://github.com/kkotwal94/DrivingService/tree/UpdateReact/server/render 。 devExtreme 组件的组件在组件文件夹中称为 DemoBase.jsx，呈现它的容器是 https://github.com/kkotwal94/DrivingService/blob/UpdateReact/app/containers/students/Students.jsx .

Answer 1

我猜你已经知道 React 16 came with lots of improvements to server-side rendering 。该更新附带了额外的服务器端渲染方法，例如 renderToNodeStream() .

官方指南upgrading React from 15 to 16提到它应该没有问题，除了一些小异常(exception)。这些异常(exception)之一是 a break change exactly when you hydrate a server-rendered container :

Hydrating a server-rendered container now has an explicit API. If you’re reviving server-rendered HTML, use ReactDOM.hydrate instead of ReactDOM.render. Keep using ReactDOM.render if you’re just doing client-side rendering.

考虑到这一点，我会在您的项目中(也可能在第三方库中)搜索一些被遗漏的 ReactDOM.render 更改为 ReactDOM。将 React 升级到版本 16 时进行水合物。