Ich habe eine reaktionsschnelle Webanwendung, die mit ReactJS erstellt wurde, für die ich eines Tages serverseitiges Rendering unterstützen möchte.
Je nach Ansichtsfenstergröße ändert sich das Layout / Verhalten der Anwendung. Aber all diese Änderungen können nicht nur mit einfacher CSS-Medienabfrage durchgeführt werden: Das JS-Verhalten und die zugrunde liegende HTML-Struktur müssen ebenfalls entsprechend der Breite geändert werden.
Zum Beispiel könnte ich haben:
Unter 800 px Breite :
%Vor%Über 800 px Breite :
%Vor%Nun möchte ich das serverseitige Rendering für diese Anwendung verwenden. Aber auf dem Server habe ich nicht die Breite, also weiß ich nicht, welche HTML-Struktur an den Client zurückgegeben wird.
Beachten Sie, dass ich nicht nach einer Lösung suche, die einen statischen standardmäßigen serverseitigen Haltepunkt verwendet und auf dem Client die App korrigiert. Ich suche nach einer Lösung, die dem Kunden die richtige HTML-Struktur entsprechend seinem Gerät zurückgibt. So sollte es gut funktionieren, wenn er Javascript in seinem Browser deaktiviert.
Man könnte argumentieren, dass ich den für beide benötigten HTML-Code rendern und die benötigten Teile mit einfachen CSS-Medienabfragen und display: none anzeigen / ausblenden könnte, aber dies würde die App komplizierter machen und dazu führen, dass viele ungenutzte HTML-Elemente gerendert werden Es ist unwahrscheinlich, dass der Benutzer über / unter den Haltepunkt bewegt wird (ich meine, wenn er ein mobiles Gerät hat, werden die HTML-Elemente für den Desktop niemals verwendet)
Wenn ich Inline-Style verwenden möchte, wird es kompliziert, weil ich diese Inline-Styles für die richtige Breite auf dem Server rendern muss.
Ich habe gesehen einige Leute denken darüber nach, den Browser UA zu schnüffeln eine geschätzte Schätzung ihrer Ansichtsfenstergröße. Aber selbst mit einer unsicheren Bildschirmdimensionserkennung bin ich nicht sicher, ob wir die Bildschirmausrichtung des Geräts auf der Serverseite kennen können.
Kann ich etwas tun, um dieses Problem zu lösen?
Ich denke, das ist was Sie wollen, aber das ist keine perfekte Lösung
1. was zählt
Sie möchten, dass mobile Benutzer die mobile Seite direkt und ohne html in der PC-Version erhalten, und umgekehrt. Dies stellt sicher, dass kein css (Inline-Stil statt) und weniger Netzwerk
erforderlich ist2.wie löse ich es
Verwenden Sie den browser user agent, um mobile Geräte oder Tablets zu erkennen, und Sie können vorhersagen und rendern auf Ihrem Server, wenn der Client geladen wurde, überprüfen Sie die Bildschirmlösung erneut und rendern erneut, wenn Sie eine falsche Vorhersage hatten.
Sie können den Callback an die Änderung der Fenstergröße und -ausrichtung binden, den Redux ändern und automatisch rendern
3. Schnappschuss
weniger Netzwerk, desto weniger bedeutet sehr, sehr wenig
falsche Vorhersage kann passieren, wenn es passiert, kann die Seite aktualisiert werden, wenn geladen
Tags und Links reactjs media-queries isomorphic-javascript serverside-rendering inline-styles