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