JavaScript: Framework Nuxt.js 3 unterstützt TypeScript und integriert Vite.js

Inhaltsverzeichnis

Nuxt.js 3.0 liegt in der öffentlichen Beta-Version vor. Im Gespräch mit heise Developer legt Vue.js-Entwickler Antony Konstantinidis den Fokus auf große Neuerungen und erläutert, was sich für Entwicklerinnen und Entwickler mit dem Release ändert. Konstantinidis ist seit über zwölf Jahren freiberuflich als Full-Stack-Entwickler, Consultant und Trainer tätig. Hauptsächlich befasst er sich mit der Frontend-Entwicklung und ist sehr glücklich mit der Entwicklung von und in Vue.js. Mit Vuejs.DE hat er 2020 die erste deutsche Anlaufstelle für Vue.js gegründet.

heise Developer: Nuxt.js 3 Public Beta ist da, was gibt es für allgemeine Optimierungen beziehungsweise Neuerungen?

Antony Konstantinidis: Zuerst sei da Folgendes gesagt: Wer bisher gezögert hat, Nuxt.js zu verwenden, weil es keine Unterstützung für Vue.js 3 bietet, für den hat das Warten jetzt ein Ende! Nuxt.js 3 ist mit der neuesten Version von Vue.js gebaut und wird daher alle Vorteile des Vue.js-3-Frameworks nutzen. Allein daher bekommt man schon einen immensen Performanceboost. Obendrauf kommen weitere Features wie die Composition API und die script setup-Syntax.

Nuxt.js 3 ist dem Beispiel von Vue.js 3 gefolgt. Das Entwicklerteam hat das Framework von Grund auf neu geschrieben, um integrierte Unterstützung für TypeScript und ECMAScript Module (ESM) zu bieten, ohne dass eine zusätzliche Konfiguration erforderlich ist. Schluss mit module.exports, nahezu überall lässt sich nun endlich die gewohnte export default-Syntax verwenden. Damit erhalten wir selbst in Projekten, die weiterhin mit JavaScript umgesetzt werden, viele Vorteile, die die Developer Experience betreffen. Dazu zählt unter anderem Autocompletion in unserer Entwicklungsumgebung (IDE). Insgesamt resultieren diese Änderungen auch in einer kompakteren Paketgröße von Nuxt.js, die um gut 20 Prozent reduziert wurde.

Nuxt.js 3 wird das Bundling mittels Webpack 5 und Vite.js unterstützen, sowohl während der Entwicklung als auch für die Produktion. Das sind wirklich hervorragende Neuigkeiten, da man anfangs Vite.js nur im Entwicklungsmodus unterstützte. Für welche Version man sich auch entscheiden mag, das Ergebnis werden in jedem Fall eine schnellere Entwicklungserfahrung und kürzere Produktions-Build-Zeiten sein.

Neben den genannten Optimierungen bietet Nuxt.js 3 auch noch weitere Verbesserungen während der Entwicklung, darunter beispielsweise:

• Auto-Import für Komponenten und Funktionen aus dem Vue.js- sowie Nuxt.js-Paket.
• Eine neue Nuxt.js CLI für das einfachere Aufsetzen eines Nuxt.js-Projektes und die Modulintegration beziehungsweise -pflege.
• Nuxt.js Devtools für schnelleres und komfortableres Debugging direkt im Browser.
• Nuxt.js Kit: einfache Entwicklung von Modulen, die sowohl mit Nuxt.js 2 als auch mit Nuxt.js 3 kompatibel sind

Nuxt.js 3: Die Highlights unter den neuen Features

heise Developer: Was sind die Top 3 der neuen Features?

Konstantinidis: Zu den Top-3-Features der neuen Version gehören Nuxt.js Nitro, Nuxt.js Bridge sowie die überarbeitete Datenbeschaffung und Integration von Suspense.

Im Bereich der Webentwicklung ändern sich die Dinge wahnsinnig schnell. Die Wichtigkeit von vollständig gerenderten Seiten für eine großartige User-Experience und SEO sind mittlerweile allen bekannt. Die JAMStack-Architektur gewinnt an Schwung und immer mehr Webseiten nutzen die Leistungsfähigkeit von CDNs (Content Delivery Network) und statischen Seiten mit API-Aufrufen. Wir wenden uns neuen und interessanten Umgebungen wie Web Workern und Deno (als Alternative zu Node.js) zu und führen Webanwendungen auf mehr Arten und Plattformen als je zu vor aus. Um dieser neuen Realität Rechnung zu tragen, wurde Nuxt.js Nitro entwickelt.

Es handelt sich dabei um die neue Rendering-Engine hinter Nuxt.js. Das Ergebnis ist ein schlanker und hochoptimierter Server (< 1 MByte) ohne Laufzeitabhängigkeiten zu Nuxt.js selbst, perfekt geeignet für sogenanntes Edge Side Rendering (ESR). Nuxt.js-Anwendungen sind damit auf nahezu jeder Umgebung wie Cloudflare Workers, Netlify, Vercel, Firebase, Azure sowie AWS und anderen Serverless-Umgebungen lauffähig. Nuxt.js Nitro ist vollkommen plattformunabhängig und quasi überall einsetzbar. Der Grund dafür ist eine automatische Plattform-Detektion und eine überaus intelligente Polyfill-Generierung für Plattformen, auf denen bestimmte APIs nicht zur Verfügung stehen.

heise Developer: Welche Vorteile bietet Nuxt.js Nitro noch?

Konstantinidis: Ein weiterer Vorteil von Nitro ist die Performanz. Das Nuxt.js-Team hat sehr viel Wert auf die Kaltstartperformanz gelegt. Kaltstarts (cold start) können als die Einrichtungszeit definiert werden, die erforderlich ist, um die Umgebung einer serverlosen Anwendung zum Laufen zu bringen, wenn sie innerhalb eines bestimmten Zeitraums zum ersten Mal aufgerufen wird. In Nuxt.js 2 beträgt diese Zeit circa 250 Millisekunden, in einer Nuxt.js-3-Anwendung auf Basis von Nitro dauert es nur 5 Millisekunden, um die Anwendung zu starten. Es handelt sich also im Vergleich um 75- bis 100-mal schnellere Kaltstarts.

Durch die neue Engine besteht nun erstmals auch die Möglichkeit, eine Mischung aus SSR (Server-side Rendering) und SSG (Server-side Generation) in eigenen Anwendungen zu verwenden. Man muss sich nicht mehr für ein globales Modell entscheiden, sondern kann nun sogar bis auf Routinglevel entscheiden, ob eine Seite statisch ist, vorgerendert, inkrementell gerendert oder über eine HTTP-Caching-Strategie gecached werden soll. Damit kann man die für die eigenen Anwendungen und Use-Cases passende Performancestrategie umsetzen. Passend zum Thema ist der Talk von Daniel Roe zu empfehlen.

Seit Vue.js 3 wissen wir alle, wie umfangreich und langwierig eine Migration auf eine neue Version sein kann. Neben dem Hauptframework müssen auch alle Pakete und Module eine Migration vornehmen und uns Entwicklern neue Versionen bereitstellen, die wir in unseren Applikationen nutzen können, bevor wir ein Upgrade durchführen können. Kompatibilität ist also ein großes Thema. Auch das Team von Nuxt.js kennt die mit einer Migration einhergehenden Probleme. Deshalb hat es sich um ein extra Tooling gekümmert, das den Umstieg oder auch Verbleib auf Nuxt.js 2 so angenehm wie möglich gestalten soll.

heise Developer: Was bringt die Nuxt.js Bridge?

Konstantinidis: Nuxt.js Bridge vereinfacht Upgrades für das gesamte Nuxt.js-Ökosystem. Ältere Plug-ins und Module funktionieren weiterhin, die Konfigurationsdatei (nuxt.config.js) von Nuxt.js 2 ist mit Nuxt.js 3 kompatibel und mehrere Nuxt.js-3-APIs bleiben unverändert, um ein progressives Upgrade zu ermöglichen. Das alleine ist schon eine wirklich hervorragende Leistung und zeigt, wie wichtig dem Team die Community und Nutzer des Frameworks sind.

Dazu gibt es nun sogar noch die Möglichkeit, dass man auch umgekehrt, also beim Verbleib auf einem Nuxt.js-2-Projekt, von möglichst vielen der Neuerungen aus Nuxt.js 3 profitieren kann. Dafür wird eine Vielzahl der Neuerungen aus Nuxt.js 3 auch auf Nuxt.js 2 zurückportiert, darunter befinden sich unter anderem:

• der TypeScript- und ESM-Support
• Nitro
• die neue CLI und Devtools
• Vite.js
• die Composition API sowie das auto import-Feature
• Nuxt.js Kit

In Nuxt.js-Anwendungen konnte das Abfragen von Daten insbesondere für neue Entwickler etwas verwirrend sein, da es über die Zeit viele verschiedene Möglichkeiten gab, dies zu tun.

Vor Version 2.12 musste man, um Daten serverseitig zu rendern, die asyncData-Funktion verwenden, die allerdings nur auf Seitenebene verfügbar ist. Das serverseitige Rendering auf Komponentenebene war damals noch nicht verfügbar. Das heißt, wir mussten die Daten als Props an unsere Komponenten übergeben. Außerdem existierte zusätzlich die fetch-Funktion, die ebenfalls nur auf Seitenebene verfügbar war, aber einen anderen Zweck hatte. Fetch wurde verwendet, um den Store zu befüllen, bevor eine Seite gerendert wurde.

Mit der Veröffentlichung von Nuxt 2.12 wurde fetch enorm erweitert und viele der Restriktionen wurden aufgehoben. Die Leistung von Nuxt.js hat sich dadurch erheblich gesteigert und die Art und Weise, wie Projekte strukturiert werden können, um sie noch sauberer und organisierter zu machen, wurde verändert.

Wo Licht ist, da ist aber auch Schatten. Die Vielzahl an Konfigurationsmöglichkeiten der neuen überarbeiteten Methode, Daten abzufragen, war nur ein Problem. Die Unterschiede zwischen den beiden Versionen von fetch und dem Vorhandensein von asyncData mit einem ähnlichen, aber doch teils anderen Verwendungszweck sowie die Tatsache, dass da auch noch das native Browser fetch existiert, führte häufig genug zu Frust und Verwirrung bei den Entwicklern.

heise Developer: Was bietet Nuxt.js 3, um diesen Verwirrungen entgegenzuwirken?

Konstantinidis: Mit Nuxt.js 3 wurden die beiden Funktionen nun in ein neues Composable namens useAsyncData zusammengeführt. Es kann somit, wie auch alle anderen Composition-API-Funktionen, in jeder beliebigen Komponente verwendet werden. Es kann frei entschieden werden, ob die Navigation daraufhin so lange blockiert werden soll, bis die Abfrage abgeschlossen ist oder eben nicht. Außerdem wird sichergestellt, dass die Daten nur ein einziges Mal auf dem Server und nicht erneut auf dem Client angefragt werden.

Jetzt kommen wir aber zu dem Besonderen an der Stelle. Während einer Anfrage muss dem Nutzer der Ladezustand irgendwie angezeigt werden. Um die Verwaltung und Verwertung des Zustandes musste man sich in der Vergangenheit selbst kümmern. Seit Vue.js 3 und dem Suspense Feature kann Vue aber mit asynchronen Komponenten umgehen. Das bedeutet, dass meine setup-Funktionen nun Daten anfragen und auf das Ergebnis warten können, damit nicht unnötigerweise ein Rendering stattfindet, obwohl notwendige Daten dafür noch nicht vorhanden sind. Die Suspense-Komponente kann genau in diesen Anwendungsfällen verwendet werden, um relativ einfach einen Fallback- oder Fehlercontent anzuzeigen.

Nuxt.js 3 verwendet standardmäßig dasselbe Verhalten auf Basis der Suspense-Komponente, um die User Experience noch weiter zu steigern und ein rundum gutes Gefühl für die Benutzer zu erzeugen. Auch hierbei gilt natürlich wie immer bei Nuxt.js: Es ist vollkommen frei konfigurierbar, falls man dieses Verhalten nicht möchte – entweder global oder je nach Anwendungsfall.