Ab auf die Insel: die Island-Architecture mit Vue und Eleventy
Moderne Frontend Frameworks werden nicht mehr nur dafür verwendet um Single Page Applications zu bauen, sondern – in Kombination mit Static Site Generators wie Nuxt – auch für das Generieren von klassischen Webseiten.
Um statisches, vorgerendertes HTML wieder dynamisch zu machen, wird ein Prozess namens Hydration angewandt. Dies kann sich negativ auf wichtige Core-Web-Vital-Metriken auswirken. Die Island-Architecture setzt darauf, nur Teile einer Webseite zu hydrieren: Partial Hydration ermöglicht es, Bundle-Sizes erheblich zu reduzieren.
Erfahre wie man Vue.js und Eleventy vereinen kann, um mit modernen Tools, Webseiten zu bauen, die perfekte Core Web Vitals erreichen.
Vorkenntnisse
- Erfahrung mit Vue.js ist für diesen Vortrag von großem Vorteil.
- Wissen über statische Site-Generatoren und speziell Eleventy ebenfalls.
- Wer schon einmal eine JavaScript-lastige Seite für das erreichen von guten Core-Web-Vitals-Werten optimiert hat, kann sich neue Anregungen holen.
Lernziele
- Grundkenntnisse über die Island-Architecture
- Partial Hydration mit Vue.js
- Eleventy verwenden mit Vue.js und JSX
- Grundkenntnisse Performanceoptimierung von JavaScript-lastigen Seiten