1. Zuhause
  2. Frage und Antwort
  3. AngularJS - serverseitige Rendering

AngularJS - serverseitige Rendering

2013-04-26 7 views
69

Wie Sie vielleicht wissen, opensourced AIRBNB Rendr (http://nerds.airbnb.com/weve-open-sourced-rendr), die serverseitige apps Rendering von Backbone ermöglichen sollte. Das ist cool, weil man die erste "Iteration" des Template-Renderings auf dem Server ausführen kann und der Client das vollständig gerenderte HTML-Dokument und die gesamte JS-App bekommt. Es reduziert die Zeit bis zur Anzeige erheblich und kann uns von anderen Server-seitigen Templating-Systemen befreien.AngularJS - serverseitige Rendering

Also, haben jemand AngularJS mit jsdom oder ZombieJS rendern? Diese dom/Browser-Emulationen auf Node.js sollten theoretisch für einfache serverseitige Angular-Templates ausreichen, aber die Ergebnisse, die ich fand, waren nicht sehr aussagekräftig.

Quelle

2013-04-26 tillda

+7

Es kann in AngularJS 2.0 kommen. In diesem Video (http://youtu.be/ZhfUv0spHCY?t=40m30s) sprechen sie über serverseitiges Rendering und warum es momentan mit AngularJS nicht möglich ist. –

Antwort

2

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

Quelle

2013-05-01 18:18:46 Lior

+0

es scheint ein gutes Werkzeug zu sein, verwenden Sie es in der Produktion? – IamStalker

4

Ich suche auch nach einer Lösung. Es ist jedoch keine Option, den HTML-Code auf dem Server mit dem Browser zu rendern und an das Frontend zu senden. Airbnb probiere es zuerst aus, lehnt es aber ab, weil es langsam und ressourcenhungrig ist. Es ist keine Produktionslösung.

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

Quelle

2013-05-03 16:54:45 Aleksandrenko

+0

In den meisten Fällen wird serverseitiges Rendering für Roboter und einige Sonderfälle verwendet, so dass die Auswirkungen auf die Serverleistung vernachlässigbar sind. Das 'Rendern' auf der Serverseite ist auch nur eine Vorlage für die HTML-Verarbeitung, ohne das eigentliche Rendern (welches am meisten CPU-hungrig ist), was sowieso auf der Clientseite auftritt. – setec

+0

In der Regel möchten Sie das serverseitige Rendering bei einem initialen Laden durchführen. So geht Benutzer x zum ersten Mal auf eine Listenseite, wenn er die App besucht. 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 machen, kann der Server all das für uns beim ersten Start tun. Der andere sehr nützliche Grund, dies zu tun, ist für Suchmaschinen-Bots. Nicht alle von ihnen sind so intelligent wie die Google Bots und haben keine eigenen Javascript-Compiler. – jemiloii

+0

Die Renderzeit spielt für Google AdWords-Bots eine Rolle, die die Ladezeit als Faktor für die Qualität der Zielseite verwenden (https://support.google.com/adwords/answer/2404197?co=ADWORDS.IsAWNCustomer%3Dfalse&hl=de). Ich habe festgestellt, dass sogar kopflose Browser wie PhantomJS eine erhebliche CPU-Last erzeugen. –

1

Dies ist nicht performant, aber ich habe arbeitete an einer einfachen PhantomJS server for Heorku, die Client JS analysieren wird. Ich verwende es speziell mit Angular und Rails, um HTML zu Bot-Anfragen zu bedienen.

Quelle

2013-09-18 16:14:01 smothers

5

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

So, Rendering ist sehr einfach: Verwenden Sie einfach Winkel in Jsdom und es funktioniert. Es ist etwas schwieriger, es zum Browser zu setzen.

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

Um dynamische Server-zu-Client-Updates zu erhalten, können Sie MutationEvents verwenden (unglücklicherweise unterstützt jsdom keine MutationObserver, 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).

Auch um Benutzerereignisse zu aktivieren, sollten Sie sie dokumentweise im Browser und in ähnlicher Weise sammeln und an den Server senden.

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

Ein Nachteil der Server-Seite-Rendering ist die Abwesenheit von Modellgröße DOM-Box, weil Element Breite/Höhe bekommen sollte es tatsächlich gemacht werden. Bedeutet, dass diese Lösung kaum für Svg und so weiter passt.

Sie können auch betrachten, Scope-Modell und die Synchronisierung mit browser-Seite Bereiche, aber das ist eine ganz andere Geschichte.

Quelle

2014-11-02 00:05:32 setec

5

Dieses neue Paket, das Sie https://github.com/a-lucas/angular.js-server erlaubt löst eine Winkel Anwendung vorrendern und HTML an den Client senden, die dann die JS-Code ausgeführt wird.

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

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

Quelle

2016-07-15 14:48:16

2

Ich weiß, das ist ein bisschen eine späte Antwort, angular.js-server (https://github.com/a-lucas/angular.js-server) verwendet eine modifizierte Version von angular, die einen Leerlaufzustand auslöst, der notwendig ist, um zu erkennen, wann alle ajax-Anfrage- und $ compile-Ereignisse verarbeitet werden.

Ich schaffte es, den mean.js-Stack fast ohne Modifikation vorzurendern.

Quelle

2016-07-16 22:20:18 Ant

 Verwandte Themen

  • Keine verwandten Themen^_^