Von Nuxt.JS zu Gridsome und wieder zurück

Ein cooles Framework mit Ecken und Kanten vs. einem 'Oldie' welcher doch nochmals so richtig Gas gibt.

Entstanden als Vue.JS Alternative zu React/Gatsby bietet Gridsome viele hilfreiche Tools um in Kürze JAMStack konforme Webseiten zu entwickeln. Alte Wordpress Instanzen lassen sich damit zum Beispiel wunderbar in eine Headless Server Architektur umwandeln, sodass Wordpress nur noch die Backend-API - also den Inhalt - zur Verfügung stellt, das Frontend jedoch statisch gerendert als reine HTML Dokumente auf dem Server abgelegt werden kann. Vorbei mit Sicherheitsproblemen, regelmässigem Updatezwang und schlaflosen Nächsten bei PHP und Wordpress Core Updates. Wie einfach dies geht hat unsere Entwicklerin Marielle Beusch an der letzten JAMStack Barconf der Web Professionals in einem Live Coding eindrücklich demonstriert.

Soweit so gut und alles (nach wie vor) eine tolle Sache. Nur: Nuxt.JS hat sich im letzten Jahr sehr stark weiterentwickelt und ist mittlerweile ein richtig mächtiges Framework in und mit einem Ökosystem geworden. Kinderkrankheiten der ersten Releases wurden ausgebessert und die Perfomance sowohl im Build-Prozess als auch bezüglich SEO massiv optimiert.

Im Gegensatz zu den ersten Releases ist Nuxt.JS unter anderem dank folgenden Punkten wieder zurück an die Spitze gesprintet:

  • full static (die ersten Static Site builds waren noch etwas chaotisch, der ursprüngliche Fokus von Nuxt.JS lag auch eher beim SSR. Eher ungern erinnere ich mich an mein erstes Nuxt Projekt)
  • Verbesserung des Data Fetchings (nuxt/content)
  • verbesserte Search Engine Optimierung des gerenderten Codes

Fazit:

Die beiden Frameworks lassen sich nicht direkt vergleichen - genau so wenig wie sich VuePress auf einen direkten Vergleich mit den beiden einlassen muss. Nach wie vor bietet Gridsome dank diversen Content Source Plugins eine einfache Lösung um bestehende Monolithen in die JAMStack Architektur zu überführen.

Nuxt.JS hingegen war schon immer ein flexibles und universelles Framework mit welchem sich sowohl Static Sites wie auch Server Side Rendered Applications erstellen lassen. Und genau das macht es von Release zu Release immer besser.

Der grosse Unterschied zu Gridsome liegt im Wort Applications. Nuxt.JS erlaubt eine viel ausgefeiltere Integration von Vue.JS und dessen Stärken in das Frontend als es Gridsome ermöglichen kann. Aber Nuxt.JS hat auch das Data Fetching und Static Rendering mitterlweile so gut hinbekommen, dass die gängigen Search Engines wie Google etc. in fast allen Situationen den Content optimal indexieren können. Im static Mode wird die Grenze zwischen Pre-Rendering und Data Fetching on demand sehr klein - und Nuxt rendert (auch über CI/CD Provider wie Netlify etc.) genau so wie es soll. Was es für uns immer öfter zum Werkzeug unserer Wahl macht.

PS: Der gesamte Relaunch von https://www.web-professionals.ch/ wurde mittels Nuxt.JS implementiert und bietet nebst Pre-Rendered Content diverse "Vue-powered" Tools wie z.B. Anmeldung, Online-Prüfungen, Studenten-Portal mit Diplomen und Rechnungskontrolle und und und... Eine Web-Applikation, static und doch dynamic.

Rolf Eggenberger