Vue lernen

Kapitel 13. Serverseitiges Rendering mit Vue

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Im vorherigen Kapitel haben wir gelernt, wie wir die komplette CI/CD-Pipeline unserer Vue-Anwendung einrichten. Wir haben auch gelernt, wie wir unsere Anwendung mit Netlify für die Produktion bereitstellen. Unsere Anwendung ist jetzt bereit für den Zugriff der Nutzer/innen über das Web. Damit haben wir unsere Reise zum Erlernen von Vue fast abgeschlossen. In diesem Kapitel werden wir den anderen Aspekt der Verwendung von Vue erkunden, das serverseitige Rendering und die Erstellung statischer Websites mit Nuxt.js .

Client-seitiges Rendering in Vue

Standardmäßig werden Vue-Anwendungen clientseitig gerendert, mit einer Platzhalterdatei index.html, einer JavaScript-Datei (die normalerweise von Vite zur Leistungsoptimierung in Teilen kompiliert wird) und anderen Dateien wie CSS, Icons, Bildern usw. für ein vollständiges UI-Erlebnis. Beim ersten Laden sendet der Browser eine Anfrage an den Server, um die index.html Datei zu erhalten. Im Gegenzug liefert der Server die ursprüngliche Platzhalterdatei (oft mit einem einzigen Element mit einem eindeutigen id-Selektor app für die Vue-Engine, um die App-Instanz zu mounten) und ein script Tag, das auf die erforderliche JavaScript-Datei mit dem Hauptcode verweist. Sobald der Browser die HTML-Datei empfängt, beginnt er mit dem Parsen und fordert zusätzliche Ressourcen ...