AngularJS - serverseitiges Rendern

75

Wie Sie vielleicht wissen, sollte AirBnb Rendit ( http://nerds.airbnb.com/weve-open-sourced-rendr ) öffnen, das das serverseitige Rendern von Backbone- Apps ermöglichen soll. Das ist cool, weil man die erste "Iteration" des Template-Renderings auf dem Server ausführen kann und der Client ein vollständig gerendertes HTML-Dokument sowie die gesamte JS-App erhält. Dies verkürzt die Anzeigezeit erheblich und kann andere serverseitige Template-Systeme loswerden.

Also, hat jemand geschaffen AngularJS mit jsdom oder ZombieJS zu machen ? Diese Dom / Browser-Emulationen auf Node.js sollten theoretisch für einfaches serverseitiges Angular-Templating ausreichen, aber die Ergebnisse, die ich beim Googeln fand, waren nicht sehr schlüssig.

tillda
quelle
7
Es kann in AngularJS 2.0 kommen. In diesem Video geht es um serverseitiges Rendern und darum, warum es derzeit mit AngularJS nicht möglich ist, so etwas zu tun.
JayQ
Hat eine der Antworten für Sie funktioniert?
Xsmael

Antworten:

15

Hier ist eine andere Lösung: https://github.com/ithkuil/angular-on-server

Wiki für Details

Update vom Autor dieses Repos : Das war vor ungefähr 6 Jahren (zum Zeitpunkt dieser Bearbeitung). Zu diesem Zeitpunkt sollten Benutzer wahrscheinlich https://angular.io/guide/universal oder nur https://prerender.io/ verwenden.

viel
quelle
3
Das Angular.io-Ding ist für Angular, nicht für AngularJs. Sie sind zwei völlig verschiedene Sprachen ...
Bokkie
Kann ich Prerender in einer Anwendung verwenden, die serverseitig PHP anstelle von Express verwendet? Wie?
Razvan Zamfir
7

Mit diesem neuen Paket https://github.com/a-lucas/angular.js-server können Sie eine Angular-Anwendung vorab rendern und HTML an den Client senden, der dann den jS-Code ausführt.

Es unterstützt das Caching pro URL und Sie können Regeln definieren, um das URL-Pre-Rendering zu aktivieren.

PS: Ich bin der Hauptverantwortliche für dieses Paket.

Antoine Lucas
quelle
5

AngularJS arbeitet mit jsdom-Kontext ohne Tricks. Fügen Sie einfach angular.js zur js src-Liste und die Hauptseite der eckigen App zu jsdom bei der Initialisierung hinzu.

Das Rendern ist also sehr einfach: Verwenden Sie einfach eckig in jsdom und es funktioniert. Es ist etwas schwieriger, es in den Browser zu stellen.

Eine Möglichkeit ist die Stapelsynchronisierung von DOM-Änderungen.

Um dynamische Server-zu-Client-Updates zu erhalten, können Sie MutationEvents verwenden (leider unterstützt jsdom MutationObservers nicht, aber MutationEvents funktionieren ziemlich schnell). Verwenden Sie sie, um DOM-Änderungen im Akkumulator-Array zu stapeln und regelmäßig an den Client-Browser zu senden (z. B. pro 25 ms).

Um Benutzerereignisse zu aktivieren, sollten Sie sie auch im Browser dokumentweise verfolgen und Ähnlichkeiten sammeln und auf den Server übertragen.

Eine Implementierung eines solchen Ansatzes ist jsdom-sync ( https://www.npmjs.org/package/jsdom-sync ).

Ein Nachteil des serverseitigen Renderns ist das Fehlen der Größe des DOM-Box-Modells, da es zum Rendern der Elementbreite / -höhe tatsächlich gerendert werden sollte. Bedeutet, dass diese Lösung kaum für SVG und so weiter passt.

Sie können auch in Betracht ziehen, das Scope-Modell anzusehen und es mit browser-seitigen Scopes zu synchronisieren, aber das ist eine ganz andere Geschichte.

setec
quelle
4

Ich suche auch nach einer Lösung. Es ist jedoch keine Option, einen Browser zu verwenden, um das HTML auf dem Server zu rendern und an das Frontend zu senden. Airbnb versucht es zuerst, wird aber abgelehnt, weil es langsam und ressourcenhungrig ist. Es ist keine Produktionslösung.

Update: Dies kann bald mit der Einführung von Object.observe möglich sein;)

Aleksandrenko
quelle
In den meisten Fällen wird serverseitiges Rendering für Roboter und einige Sonderfälle verwendet, sodass die Auswirkungen auf die Serverleistung vernachlässigbar sind. Auch "Rendern" auf der Serverseite ist nur eine Vorlage für die HTML-Verarbeitung, ohne tatsächliches Rendern (das am meisten CPU-hungrig ist), das ohnehin auf der Clientseite auftritt.
Setec
Normalerweise möchten Sie das serverseitige Rendern beim ersten Laden durchführen. Daher besucht Benutzer x zum ersten Mal eine Listenseite, um die App zu besuchen. Vielleicht haben sie den Browser geschlossen und später wieder geöffnet. Anstatt die App zu laden und dann eine weitere http-Anfrage für die Daten zu stellen, kann der Server all dies beim ersten Start für uns erledigen. Der andere sehr nützliche Grund dafür sind Suchmaschinen-Bots. Nicht alle von ihnen sind so schlau wie die Google Bots und haben keine eigenen Javascript-Compiler.
jemiloii
Die Renderzeit spielt für Google Adwords-Bots eine Rolle, die die Ladezeit als Faktor für die Qualität der Zielseite verwenden . Ich habe festgestellt, dass selbst kopflose Browser wie PhantomJS eine erhebliche CPU-Auslastung erzeugen.
Edward Newell
2

@ dai-shi erstellt connect-prerenderer, siehe hier . Noch ein paar Probleme, aber hoffentlich ein guter Start

Lior
quelle
Was ist, wenn ich eine Anwendung habe , die auf der Serverseite PHP anstelle von Express verwendet? Welche Option habe ich?
Razvan Zamfir
2

Ich weiß, dass dies eine etwas späte Antwort ist. Angular.js-server ( https://github.com/a-lucas/angular.js-server ) verwendet eine modifizierte Version von Angular , die einen Leerlaufzustand auslöst, der erforderlich ist, um alle zu erkennen Ajax-Request- und $ Compile-Ereignisse werden verarbeitet.

Ich habe es geschafft, den mean.js-Stack fast ohne Änderungen vorab zu rendern.

Ameise
quelle
1

Dies ist nicht performant, aber ich habe an einem einfachen PhantomJS-Server für Heorku gearbeitet , der jeden Client-JS analysiert. Ich benutze es speziell mit Angular und Rails, um HTML für Bot-Anfragen bereitzustellen.

erstickt
quelle
-1

Ich hoffe, es könnte noch jemandem helfen, aber hier ist ein npm-Paket, das ich erstellt habe:

https://www.npmjs.com/package/ng-node-compile

MoLow
quelle
Können Sie mehr Erklärungen geben, woher es weiß, wann die Pipeline von AngularJs nicht mehr funktioniert?
IamStalker