5

刷新页面（并通过我的 ssr）后，除非我浏览我的应用程序并返回它，否则似乎没有任何 css 是持续的，甚至单击一些元素。是否有任何正确执行此操作的示例？

我使用受控“反应材料 ui 网格”示例中的完全相同的代码：

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

这是刷新后发生的图片： 图片

在生产模式和开发模式下，其他一切都可以正常呈现（所有其他页面）。我不知道我在这里缺少什么。看起来 jss-in-css 映射不正确。

我发现恢复到 React 16 之前的一切都重新开始工作 SSR 和什么不是，但是我不能使用 dx-react-grid 项目，因为它需要 16。有点像 wackamole，仍在调查我犯错的地方。

测试

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

如果您在该页面上点击刷新，您将看到所有 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。

4

2 回答 2

0

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

原因 #1：如果您使用的是材料 ui 版本 4.x，那么您应该查看 我们使用的材料 ui 版本 3.x 或更低版本中的ssr 文档

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 的完整代码，请参阅此链接

于 2020-12-12T05:00:01.223 回答
0

我猜你已经知道React 16 对服务器端渲染做了很多改进。该更新附带了额外的服务器端渲染方法，例如renderToNodeStream().

将 React 从 15 升级到 16的官方指南提到它应该没有问题，只有少数例外。其中一个例外是恰好在您为服务器渲染的容器添加水合时发生中断更改：

水合服务器渲染的容器现在有一个明确的 API。如果您要恢复服务器呈现的 HTML，请使用ReactDOM.hydrate而不是ReactDOM.render. ReactDOM.render如果您只是在进行客户端渲染，请继续使用。

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

于 2018-01-17T16:07:39.960 回答