ReactJs Server Side Rendering Flackern Problem

Question

Ich benutze ReactJs serverseitigen Rendering und vor dem Laden der Seite komplett Seite blinken für einmal. Kann jemand sagen, warum passiert das?

Answer 1

Um zu verstehen, lassen Sie uns einige grundlegende Fakten über serverseitige Rendering sehen:

Die erste Seite vom Server (im Wesentlichen das Markup) und wird sofort gezeigt an den Benutzer

Post, dass zusätzliche Vermögenswerte serviert wie Bilder, js, css usw. werden asynchron geladen.

Sobald die Assets geladen sind, tritt das Framework (hier reagieren) ein und ersetzt die ursprünglich gerenderte Server-Seite. Dies ist wichtig, da die Client-Routen usw. jetzt funktionieren können, da die App über alle Ressourcen verfügt.

Jetzt in Ihrem Fall, sobald die Reaktion tritt auf die erste Route und lädt die Seite (träge) und ersetzt diese mit der Server gerenderten Seite. Diese Verzögerung (langsames Laden Ihrer Route; erste Route) verursacht den Flickr.

Eine Möglichkeit, dies zu verhindern, könnte sein, Ihre erste Route irgendwie vorzuladen! Nicht sicher, wie Sie es in Reaktion tun würden ...