Interaktive Websites mit Nuxt.js – für Geschwindigkeit, SEO und Social Media

Inhaltsverzeichnis

Bei der Reise durch das Web sind manche Websites schnell, manche erschreckend langsam. Je nachdem, wie geschickt die Autoren der Website vorgehen, ruckelt sich die Darstellung nach und nach zurecht, bis alle Informationen den Browser erreichen und verarbeitet wurden. In den letzten Jahren kamen immer mehr Single Page Applications (SPA) hinzu. Nutzer erkennen sie meist an dem sich drehenden Ajax-Kringel, der sie zur Geduld auffordert. Verwenden können sie die Seite erst, wenn der Browser alle JavaScript-Bibliotheken und die eigentlichen Daten nachgeladen hat.

Die Nutzer hätten sich schon längst an die Wartezeit gewöhnt, wenn es nicht immer wieder Websites gäbe, die schnell sind, nicht ruckeln und trotzdem Interaktivität durch JavaScript bieten. Doch was macht eine Website schnell? Und wie kann man die Geschwindigkeit mit einem JavaScript-Framework wie Nuxt.js umsetzen?

Interaktive und schnelle Universal Web Apps

Eine schnelle Website muss bereits nach der ersten HTTP-Antwort für den Nutzer dargestellt sein. Allerdings ermöglicht erst JavaScript eine voll interaktive Website, die nicht bei jeder Nutzerinteraktion mit dem Server Kontakt aufnehmen muss.

Universal Web Apps vereinen die schnelle Anzeige einer statischen HTML-Seite und die Interaktivität der Single-Page-App. Frameworks ermöglichen das, indem sie die HTML-Seite serverseitig vorberechnen. Sie packen alles für die erste Darstellung Notwendige in die eine entscheidende Antwort: zu Beginn das CSS, dann das vorberechnete HTML. Erst danach, während die Seite schon angezeigt wird, lädt und startet JavaScript. Während die Nutzer schon lesen und scrollen können, wird die Seite durch das nachgeladene JavaScript nahtlos zur interaktiven Single-Page-App. Da das CSS eingebettet vor dem HTML steht, entfällt ein häufiger Grund für einen ruckelnden Seitenaufbau. Verwenden die Entwickler responsives CSS, so werden Platzhalter für Grafiken beim ersten Rendern in der passenden Größe vorgehalten und der zweite Grund für einen ruckelnden Seitenaufbau entfällt.

Warum gerade Nuxt.js?

Für alle drei populären JavaScript-Frameworks stehen Erweiterungen für Universal Web Apps zur Verfügung: Für Angular ist es Angular Universal, für Vue.js ist es Nuxt.js und für React NEXT.js oder auch Gatsby. Die Entscheidung zwischen diesen Erweiterungen fällt nicht leicht: Mit welchem Framework sind die Entwickler eher vertraut? Wie groß ist die Community und wie groß sind die Zukunftsaussichten des Frameworks? Bietet es genügend Funktionen und ist es bei Bedarf erweiterbar? Sind die APIs stabil?

Der Autor des Artikels entschied sich für Nuxt.js, da er mit Vue.js bereits gute Erfahrungen gesammelt hat. Vue.js bietet in der Kombination mit Nuxt.js alle benötigten Funktionen für schnelle und interaktive Websites. Über Vue.js konnte der Autor auch schwierige Integrationen mit Drittherstellern umsetzen. Nuxt.js erwies sich als gut konfigurier- und erweiterbar.

Darüber hinaus ist Vue.js aus Sicht des Autors das Framework mit der größten API-Stabilität, da die 2.x-API bereits seit September 2016 besteht. Auch die geplante 3.x-API soll weitestgehend abwärtskompatibel bleiben. Vue.js und Nuxt.js liefern in regelmäßigen Minor-Releases Erweiterungen ohne die API-Kompatibilität zu brechen. Die folgenden Beispiele nutzen daher Nuxt.js. Die aufgeführten Anwendungsfälle können Leser verwenden, um andere Frameworks für ihren Bedarf zu evaluieren.

Nuxt.js-Modus: normal, schnell, Turbo!

Nuxt.js kann in verschiedenen Modi arbeiten.

Single-Page-App-Modus

Das serverseitige Erstellen der Seite bleibt zunächst deaktiviert, dafür kann die Anwendung überall dort eingesetzt werden, wo heute Single-Page-Apps Verwendung finden. Dazu generiert Nuxt.js im Build-Prozess die notwendigen minifizierten JavaScript- und HTML-Dateien. Damit sehen Nutzer der Website erst dann Daten, wenn die komplette SPA geladen und gestartet ist.

Universal-App-Modus

In diesem Modus berechnet Nuxt.js die Seiten serverseitig, wenn Nutzer sie aufrufen. Dafür läuft auf dem Server eine Node-Instanz. Entwickler können Daten dynamisch zum Beispiel via REST aus Backend-Systemen laden. Website-Besucher erhalten eine individuell für sie vorberechnete HTML-Seite, auf der sie bereits lesen und scrollen können, während der Browser den JavaScript-Teil der Anwendung nachlädt.

Pre-Rendered-Modus

Statt die Seite bei jedem Aufruf neu zu berechnen, tut Nuxt.js dies im Pre-Rendered-Modus nur einmal zum Build-Zeitpunkt. Ergebnis ist eine statische HTML-Seite nebst dazugehörigen JavaScript-Dateien, die anschließend über ein Content Delivery Network (CDN) zu den Nutzern gelangen. Das CDN sorgt dafür, dass die Daten auf mehreren weltweit verteilten Servern vorliegen und immer der Server sie ausliefert, der dem Nutzer am nächsten ist. Das beschleunigt den Seitenaufbau noch einmal deutlich. Ändern sich wesentliche Inhalte der Website, muss Nuxt.js die Seiten jedoch neu generieren und an das CDN verteilen.