On the server we always want to show a verbose H1 for SEO reasons. However on mobile clients we want to show a shorter H1 due to the limited screen space.
This results in: 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:
For example, image a page about Second world war that it about Hitler. The wanted result is:
Client: <h1> History </h1> .... (on small devices like a mobile)
Server: <h1> History, World War 2, Hitler </h1> ..(And desktop devices)
Anyone have any ideas on how to approach this? Should this warning be ignored? or is there a better way to achieve this?
This message is probably not caused by the H1, usually this is a data problem, e.g. examine the data (props) you're feeding into the app on the client and in the server. If there is any difference React will throw this Warning.
EDIT after clarifying comment:
I would modify the title on the client side in one of React's lifecycle events that is only fired on the client, e.g.
componentDidMount.