Alexander Lichter
Web Engineering Consultant • Founder • Nuxt team • Speaker
Vueday enterJS - 15. Juni 2021
Alexander Lichter
Nuxt.js Core Maintainer
@TheAlexLichter
Web Dev Consultant
@TheAlexLichter
@TheAlexLichter
2
+ vue router + (+ vuex)
soon!
3
@TheAlexLichter
@TheAlexLichter
Es kann viele Ordner geben
Minimale Struktur
@TheAlexLichter
@TheAlexLichter
@TheAlexLichter
SPA
Dynamisches SSR
SSG
Typische Single Page Applications - nur eine HTML-Datei und viele statische Assets
Generiere deine Seite bereits während des Deployments - Jamstack-Style.
⌛
⚡
🤝
HTML wird "on demand" mittels Node.js server gerendert
1. Request
Server
2. HTML
Backend
1. Request
4. Dynamsich generiertes HTML
DB
2. Query
3. Ergebnisse
Aber: "Click and wait" für jede Seite
@TheAlexLichter
CDN
1. Request
2. "Leeres" HTML-File + JavaScript
3. Parsing
API
4. Request
5. Response
@TheAlexLichter
...dynamisch
...während des Deploys (Jamstack/ SSG)
PS: Ja, man kann sich das ganze auch selbst zusammenbauen, aber das ist wirklich nervig 🙈
Nuxt.js
Nuxt.js
Vuepress
Gridsome
@TheAlexLichter
@TheAlexLichter
Node.js
Server
1. Request
4. HTML + JS
API
2. Request
3. JSON
3. Hydration nach
JS download
@TheAlexLichter
@TheAlexLichter
Node.js
Server
3. HTML + JS als statische Dateien
API
1. Request
2. JSON
@TheAlexLichter
CDN
1. Request
3. Hydration after JS download
2. HTML & JS
@TheAlexLichter
@TheAlexLichter
SPA
Dynamisches SSR
SSG
Typische Single Page Applications - nur eine HTML-Datei und viele statische Assets
HTML wird "on demand" mittels Node.js server gerendert
Generiere deine Seite bereits während des Deployments - Jamstack-Style.
⌛
⚡
🤝
@TheAlexLichter
☸️ Kein Grund das Rad neu zu erfinden
✅ Einfache Integration von 3rd-Party-Bibliotheken
🎣 Verändere das Verhalten von Nuxt wie du es benötigst
👐🏻 Super zu testen, zu teilen und auch zu open-sourcen!
@TheAlexLichter
☸️ Kein Grund das Rad neu zu erfinden
✅ Einfache Integration von 3rd-Party-Bibliotheken
🎣 Verändere das Verhalten von Nuxt wie du es benötigst
👐🏻 Super zu testen, zu teilen und auch zu open-sourcen!
https://modules.nuxtjs.org
@TheAlexLichter
@TheAlexLichter
@TheAlexLichter
Alexander Lichter
Nuxt.js Core Maintainer
@TheAlexLichter
Web Dev Consultant
By Alexander Lichter
Web Engineering Consultant • Founder • Nuxt team • Speaker