Различная разметка для рендеринга сервера и клиента

Question

На сервере мы всегда хотим показывать подробный H1 по причинам SEO. Однако на мобильных клиентах мы хотим показать более короткий 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 выдаст это предупреждение.

РЕДАКТИРОВАТЬ после уточнения комментария:

Я бы изменил заголовок на стороне клиента в одном из событий жизненного цикла React, который запускается только на клиенте, например componentDidMount,