Mein Kunde fordert eine funktionsreiche clientseitig gerenderte Web-App, die bei Google PageSpeed Insights gleichzeitig 100/100 Punkte erreicht und beim ersten Laden mit einem leeren Cache sehr schnell rendert. Sie möchte die gleiche Seite sowohl als Web-App als auch als Zielseite nutzen und jede Suchmaschine kann die gesamte Seite mit guter SEO leicht durchforsten.
Ist das mit Meteor möglich? Wie kann es gemacht werden?
Ja, das ist möglich und einfach mit Meteor 1.3, einigen zusätzlichen Paketen und einem kleinen Hack.
Siehe bc-real-estate-math.com für ein Beispiel. (Diese Seite erreicht nur 97 Punkte, weil ich die Bilder nicht sortiert habe und das Tracking von Analytics und FBs hat kurze Cache-Leben)
Traditionell war eine clientseitig gerenderte Plattform wie Meteor beim ersten Laden mit einem leeren Cache wegen der großen Javascript-Nutzlast langsam. Das serverseitige Rendering (mit React) der ersten Seite löst das fast, außer dass Meteor out-of-the-box kein asynchrones Javascript oder Inline-CSS unterstützt und somit Ihren ersten Rendervorgang verlangsamt und Ihren Google PageSpeed Insights-Score zunichte macht Sie könnten über diese Metrik, es wirkt sich auf die AdWord-Preise meiner Kunden und damit optimieren ich für sie.
Das können Sie mit dem Setup dieser Antwort erreichen:
Was dieses Setup nicht erreichen kann:
Im Wesentlichen können Sie Folgendes erreichen:
So erreichen Sie dies
Ich habe Meteor 1.3 und diese zusätzlichen Pakete benutzt:
React spielt gut mit serverseitigem Rendering ab, ich habe keine andere Rendering Engine ausprobiert. react-helmet wird verwendet, um die <head> jeder Seite sowohl auf Client- als auch auf Serverseite (z. B. zum Festlegen des Titels jeder Seite) einfach hinzuzufügen und zu ändern. Ich benutze den Autoprefixer, um alle anbieterspezifischen Präfixe zu meinem CSS / SASS hinzuzufügen, die für diese Übung sicherlich nicht benötigt werden.
Nach den Beispielen in der react-router-, reac-router-ssr- und react-helm-Dokumentation ist der Großteil der Website dann ziemlich einfach. Weitere Informationen zu diesen Paketen finden Sie in den Dokumenten dieser Pakete.
Zunächst einmal eine sehr wichtige Datei, die sich in einem gemeinsamen Meteor-Verzeichnis befinden sollte (dh nicht in einem Server- oder Client-Ordner). Dieser Code richtet das serverseitige React-Rendering, das <head> -Tag, Google Analytics und Facebook-Tracking ein und scrollt zu #hash anchors.
So werden die Routen eingerichtet. Beachten Sie die Titelattribute, die später an den Helm übergeben werden, um den <head> Inhalt festzulegen.
App.jsx - die äußere Anwendungskomponente. Beachten Sie das <Helmet> -Tag, das einige Meta-Tags und den Seitentitel basierend auf Attributen der spezifischen Seitenkomponente festlegt.
Eine Beispielseitenkomponente:
%Vor%So fügen Sie verzögerte Schriften hinzu.
Diese Schriftarten werden nach dem anfänglichen Rendern geladen und verzögern daher nicht die Zeit bis zur ersten Wiedergabe. Ich glaube, dass dies die einzige Möglichkeit ist, Webfonts zu verwenden, ohne den PageSpeed-Score zu reduzieren. Es führt jedoch zu einer kurzen Fehlzeichung. Fügen Sie dies in eine Skriptdatei ein, die im Client enthalten ist:
%Vor% Wenn Sie einen exzellenten Service wie fontello verwenden.com und hand-pick nur die Symbole, die Sie tatsächlich brauchen, können Sie sie in Ihre inline <head> CSS einbetten und Symbole beim ersten Rendern erhalten, ohne auf eine große Schriftdatei zu warten.
Der Hack
Das ist fast genug, aber das Problem ist, dass unsere Skripte, CSS und Schriften synchron geladen werden und das Rendering verlangsamen und unseren PageSpeed-Score verringern. Leider, so weit ich das beurteilen kann, unterstützt Meteor 1.3 offiziell keine Möglichkeit, CSS einzubinden oder den Skript-Tags das async-Attribut hinzuzufügen. Wir müssen ein paar Zeilen in 3 Dateien des Core-Boilerplate-Generator-Pakets hacken.
~ / .meteor / packages / Textbausteingenerator / .1.0.8.4n62e6 ++ os + web.browser + web.cordova / os / boilerplate-generator.js
%Vor%~ / .meteor / packages / boilerplate-generator / .1.0.8.4n62e6 ++ web + web.browser + web.cordova / os / packages / boilerplate-generator / boilerplate_web.browser.html
%Vor%Zählen Sie nun die Anzahl der Zeichen in diesen 2 Dateien, die Sie bearbeitet haben, und geben Sie die neuen Werte in das Längenfeld der Dateien ein, die in ~ / .meteor / packages / boilerplate-generator / .1.0.8.4n62e6 + enthalten sind + os + web.browser + web.cordova / os.json
Löschen Sie anschließend den Ordner project / .meteor / local , um Meteor zu zwingen, das neue Kernpaket zu verwenden und Ihre App neu zu starten (das Warmladen funktioniert nicht). Sie werden nur die Änderungen im Produktionsmodus sehen.
Dies ist offensichtlich ein Hack und wird brechen, wenn Meteor aktualisiert. Ich hoffe, dass wir mit dem Posting und dem Interesse daran, auf einen besseren Weg hinarbeiten werden.
Zu tun
Zu verbessern wäre:
Tags und Links javascript seo reactjs meteor serverside-rendering