Anderes Markup für Server- und Client-Rendering

Question

Auf dem Server wollen wir aus SEO-Gründen immer eine ausführliche H1 zeigen. Auf mobilen Clients möchten wir jedoch aufgrund des begrenzten Bildschirmplatzes ein kürzeres H1 zeigen.

Daraus ergibt ich: 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:

Zum Beispiel Bild einer Seite über die Zweiten Weltkrieg, dass es über Hitler. Das gewünschte Ergebnis ist:

Kunde: <h1> History </h1> .... (auf kleinen Geräten wie einem Handy)

Server: <h1> History, World War 2, Hitler </h1> .. (und Desktop-Geräte)

Wer irgendwelche Ideen Wie geht man damit um? Sollte diese Warnung ignoriert werden? Oder gibt es einen besseren Weg, dies zu erreichen?

Answer 1

Diese Nachricht wird wahrscheinlich nicht von der H1 verursacht, normalerweise Dies ist ein Datenproblem, z. Untersuchen Sie die Daten (Props), die Sie in die App auf dem Client und auf dem Server eingeben. Wenn es einen Unterschied gibt, wird React diese Warnung auslösen.

EDIT nach clarifying comment:

Ich würde den Titel auf der Client-Seite in einem der React's lifecycle events ändern, die nur auf dem Client ausgelöst wird, z.B. componentDidMount.