服务器和客户端呈现的不同标记

Question

在服务器上，我们总是希望为搜索引擎优化的原因显示详细的H1。然而，在移动客户端，由于屏幕空间有限，我们希望显示更短的H1。

这导致：Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

例如，图像的有关第二次世界大战，它关于希特勒页。该通缉的结果是：

客户：<h1> History </h1> ...（像一个移动的小型设备）

服务器：<h1> History, World War 2, Hitler </h1>。（和桌面设备）

任何人有任何想法如何处理这个问题？应该忽略这个警告吗？还是有更好的方法来实现这一目标？

Answer 1

此消息可能不是H1引起的，通常是这是数据问题，例如，检查您在客户端和服务器中输入到应用程序中的数据（道具）。如果有任何差异，React会抛出这个警告。

编辑后 clarifying comment

：

我将修改在React's lifecycle events一个客户端，其仅在客户机上发射，例如标题componentDidMount。