© Andrey Suslov/Shutterstock.com
Bessere Performance und effizienteres Entwickeln von Vue.js-Anwendungen

Nuxt.js: Vue.js mit Extras


Vue.js hat sich vom anfänglichen Geheimtipp zum festen Mitspieler unter den JavaScript Frameworks etabliert. Möchten wir Applikationen entwickeln, die performanter als klassische SPAs arbeiten und dabei etablierte Best-Practice-Muster integrieren, genügen die mitgelieferten Bordmittel jedoch nicht mehr. Das Framework Nuxt.js verspricht genau diese Lücke zu schließen, um in der Entwicklung mit Frameworks wie Angular auf Augenhöhe zu sein.

Das Frontend-Framework Vue.js [1] hat sich seit der Einführung im Jahr 2014 auf dem Markt für JavaScript Frameworks etabliert; hinter den beiden Marktführern Angular und React gilt es derzeit als das am meisten verbreitete. Vue.js besticht durch eine intuitive Zugänglichkeit und einfache Handhabung. Es wirkt weniger überladen als Angular und ist von Haus aus vollständiger aufgestellt als das minimalistisch gehaltene React (das technisch betrachtet nur eine Library darstellt).

Frontend-Frameworks auf der Basis von JavaScript (bzw. TypeScript im Fall von Angular) generieren dynamische Daten zur Laufzeit im Browser des Users. Admin-Panels, deren Daten stets aktuell gehalten werden und manipulierbar sein müssen, sind ein klassisches Beispiel dafür. Über Techniken wie Lazy Loading können auch größere Daten (wie Bilder) auf Wunsch erst geladen werden, wenn sie in das Blickfeld des Benutzers geraten.

Was die Datenmengen optimiert und Flexibilität schafft, hat jedoch auch seine Schattenseiten. Gerade im Bereich der Suchmaschinenoptimierung (SEO) gelten Webseiten auf Basis von JavaScript Frameworks nicht immer als die beste Lösung. Die großen Suchmaschinen Google und Bing versprechen zwar, dass ihre Crawler intelligent genug gestaltet sind, um solche dynamisch generierten Seiten auslesen und verarbeiten zu können, als Seitenbetreiber bleibt jedoch manchmal eine Unsicherheit, ob das auch wirklich optimal umgesetzt wird und die eigene Seite durch diese Faktoren im Ranking nicht Nachteile erleidet. Und nicht zuletzt gibt es noch viele andere Suchmaschinen und Crawler, die diese Technik vielleicht noch nicht ausreichend beherrschen.

Diese Herausforderung ist Grund genug für uns, die Entwicklung von Webseiten auf Basis von Vue.js auf ein stabileres Fundament zu stellen, das diese Beschränkungen für uns beseitigt. Hierfür bietet sich das Framework Nuxt.js an, ein sogenanntes Higher-Level Framework [2]. Es erweitert Vue.js um beliebte und am Markt erprobte Best-Practice-Lösungen. Das langwierige Konfigurieren und individuelle Anpassen entfällt größtenteils, da Nuxt.js das von Haus aus für uns erledigt. Einige Vorteile von Nuxt.js sind:

  • Vorbereitete Arbeitsumgebung mit State Management (Vuex), Router und vue-meta (zur Verwaltung von HTML-Metadaten)

  • Konfigurationsparameter sind auf beliebte Einstellungen justiert und können auf Wunsch angepasst werden

  • Praxisorientierte Ordnerstruktur

  • Automatisches Routing [3]: vue-Files werden zu Routen umgewandelt

  • SEO-Optimierung und damit verbundene Geschwindigkeitsverbesserung

  • Code Splitting: Nur diejenigen Komponenten werden geladen, die wirklich benötigt werden

  • Vorbereitete Plug-ins zur Erweiterung um z. B. PWA-Funktionalität, Authentifizierung und HTTP-Request-Verarbeitung

SPA, SSR oder SSG?

Ein wesentlicher Faktor für eine überzeugende User Experience ist die Geschwindigkeit, mit der Daten im eigenen Browser ankommen und verarbeitet werden. Hier sind mehrere Seitenauslieferungsstrategien verbreitet. Um beurteilen zu können, welche für das jeweilige Projekt am passendsten ist, sollten wir uns zunächst die Merkmale der einzelnen Techniken verdeutlichen.

Der Standard für ein Frontend-Framework auf Java-Script-Basis war lange Zeit die Single Page Application (SPA). Der statische Teil wird über klassisches HTML und CSS geliefert. Zur Laufzeit werden die dynamischen Parts asynchron per Ajax in den Browser des Anwenders geladen. Technischer gesprochen wird das DOM (Document Object Model) des Browsers individuell manipuliert. Wie bereits erwähnt, kann das aus SEO-Sicht Nachteile mit sich bringen, da wir nicht sicher sein können, ob der Crawler auch wirklich bis zum Abschluss des Ladevorgangs mit dem Analysieren wartet. Auch längere Ladezeiten im Vergleich zu statischen Varianten müssen meist mit eingeplant werden. Die Umsetzung ist jedoch sehr einfach, da kaum weitere Konfiguration nötig ist. Auch die finale Auslieferung auf einem Webserver im Netz benötigt keine Laufzeitumgebung wie Node.js. Ein einfacher Hostingserver, der statische Seiten ausliefert, genügt bereits. Das spart im laufenden Betrieb mitunter merklich Kosten.

Eine zweite beliebte Variante ist das Server-side Rendering (SSR). Mit dieser Technik werden die Seitenkomponenten (hier Vue.js Components) zuerst auf dem Server generiert, in HTML-Strings umgewandelt und dann an den Browser geschickt. Ein Großteil der dynamischen Arbeit wird dem Userbrowser also vom Server abgenommen. Die Auslieferungszeit (Time to Content) kann somit deutlich beschleunigt werden, was gerade für rechenschwache Endbenutzergeräte gilt. Suchmaschinen-Crawler bekommen nun die fertig ausgelieferte Seite angeboten, was dem Websitebetreiber mehr Sicherheit gibt. Berücksichtigen sollte man jedoch, dass die Anforderungen an den Server bei der Nutzung von SSR steigen. Für Vue.js ist eine aktive Node.js-Laufzeitumgebung zwingend notwendig, was i. d. R. an höhere Kosten gebunden ist. Aufgrund der genannten Besonderheiten kann sich eine Einbindung externer Libraries schwierig gestalten. Hier kann ein erhöhter Wartungsaufwand vonnöten s...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang