使用devextreme和材料ui @ react16进行服务器端渲染

Question

刷新页面（并通过我的ssr）看起来没有任何css可以持续，除非我浏览我的应用程序并返回它甚至点击一些元素。有没有关于如何正确完成这个的例子？

我使用完全相同的代码来自受控的反应材料ui网格＆＃39;例如：

https://github.com/kkotwal94/DrivingService（开发分支）＆lt; - 其中组件位于components / demoBase下，SSR位于server / render / pageRender.jsx下。我使用材料ui示例来说明这是如何完成的。我在Students.jsx中使用演示网格。

这是刷新后发生的事情的照片：

其他所有内容在生产模式和开发模式下呈现正常（所有其他页面）。我不知道我在这里失踪了什么。看起来jss-in-css映射不正确。

我发现恢复到React 16之前的一切都开始再次运行SSR而不是什么，但是我不能使用dx-react-grid项目，因为它需要16种类型的wackamole，仍在调查我在哪里蠢蠢欲动。

TEST

http://transportation.kkotwal.me/ 我托管了它，如果你点击登录，你可以用yea@yea.com登录，密码：123，或者你可以只注册用户名必须是电子邮件的地方无关紧要。如果您导航到导航中的学生按钮（如果您在登录后单击运输跟踪器，则应返回到根页面/视图）。您将看到开发极端控制的网格示例。

如果您在该页面上点击刷新，您将看到所有css搞砸了。如果你不确定页面是什么：http://transportation.kkotwal.me/students。来源是：https://github.com/kkotwal94/DrivingService/tree/UpdateReact。服务器端呈现位于https://github.com/kkotwal94/DrivingService/tree/UpdateReact/server/render。 devExtreme组件的组件在components文件夹中称为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的官方指南提到它应该没有问题，只有少数例外。其中一个例外是a break change exactly when you hydrate a server-rendered container：

  

为服务器呈现的容器进行保湿现在具有显式API。如果您要恢复服务器呈现的HTML，请使用ReactDOM.hydrate代替ReactDOM.render。如果您只是进行客户端渲染，请继续使用ReactDOM.render。

考虑到这一点，我会在您的项目中（也可能在第三方库中）搜索在将React升级到版本时未能更改为ReactDOM.render的某些ReactDOM.hydrate 16。

Answer 2

这可能是服务器端代码和nodejs脚本的问题。

原因1： 如果您使用的是材料ui版本4.x，则应查看其ssr documentation 在我们使用的材料ui 3.x或更低版本中

JssProvider from 'react jss/lib/JssProvider'; 

然而，这不再是必需的，您的两个github链接均已损坏，请检查您的ssr代码并将其与material-ui文档进行比较

原因2： 您必须参考您的expressjs的构建文件夹

app.use(express.static(path.join(__dirname, '../../build'))); 
app.use(express.static(path.join(__dirname, 'public')));

这可能是另一个原因，如果缺少此原因，请检查是否也不会调用您的componentDidMount，因此不会进行客户端渲染，但是对于ssr，必须同时进行客户端和服务器端渲染

有关SSR的完整代码，请参见此link