Was ist serverseitiges Rendering von vue.js?

vue.js serverseitiges Rendering gibt Vue-Komponenten im Browser aus, um DOM zu generieren und zu betreiben. Dieselbe Komponente kann jedoch auch als serverseitige HTML-Zeichenfolge gerendert, direkt an den Browser gesendet und schließlich aktiviert werden „Eine vollständig interaktive Anwendung auf dem Client.

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

Was ist serverseitiges Rendering (SSR)?

Vue.js ist ein Framework zum Erstellen clientseitiger Anwendungen. Standardmäßig können Vue-Komponenten im Browser ausgegeben werden, um DOM zu generieren und DOM zu manipulieren. Es ist jedoch auch möglich, dieselbe Komponente als HTML-Strings auf der Serverseite zu rendern, sie direkt an den Browser zu senden und diese statischen Markups schließlich in einer vollständig interaktiven Anwendung auf dem Client zu „aktivieren“.

Vom Server gerenderte Vue.js-Anwendungen können auch als „isomorph“ oder „universal“ betrachtet werden, da der Großteil des Anwendungscodes sowohl auf dem Server als auch auf dem Client ausgeführt werden kann.

Warum Server Side Rendering (SSR) verwenden?

Im Vergleich zu herkömmlicher SPA (Single-Page Application) sind die Vorteile des serverseitigen Renderings (SSR) hauptsächlich:

• Bessere SEO, da Suchmaschinen-Crawler die vollständig gerenderte Seite direkt anzeigen können.

• Bitte beachten Sie, dass Google und Bing derzeit problemlos synchrone JavaScript-Anwendungen indizieren. Hier ist Synchronisation der Schlüssel. Wenn Ihre Anwendung zunächst eine Ladechrysantheme anzeigt und dann Inhalte über Ajax abruft, wartet der Crawler nicht auf den asynchronen Abschluss, bevor er den Seiteninhalt crawlt. Wenn SEO jedoch für Ihre Website von entscheidender Bedeutung ist und Ihre Seiten Inhalte asynchron abrufen, benötigen Sie möglicherweise serverseitiges Rendering (SSR), um dieses Problem zu lösen.

• Schnellere Zeit bis zum Inhalt, insbesondere bei langsamen Netzwerkbedingungen oder langsam laufenden Geräten. Sie müssen nicht warten, bis das gesamte JavaScript heruntergeladen und ausgeführt wurde, bevor vom Server gerendertes Markup angezeigt wird, sodass Ihre Benutzer schneller eine vollständig gerenderte Seite sehen. Dies führt im Allgemeinen zu einer besseren Benutzererfahrung und ist entscheidend für Anwendungen, bei denen die Zeit bis zum Inhalt in direktem Zusammenhang mit der Konversionsrate steht.

Bei der Verwendung von serverseitigem Rendering (SSR) gibt es einige Kompromisse:

• Begrenzte Entwicklungsbedingungen. Browserspezifischer Code kann nur in bestimmten Lebenszyklus-Hooks verwendet werden; einige externe Bibliotheken erfordern möglicherweise eine spezielle Behandlung, um in vom Server gerenderten Anwendungen ausgeführt zu werden.

• Mehr Anforderungen bezüglich Build-Einrichtung und -Bereitstellung. Im Gegensatz zu vollständig statischen Single-Page-Anwendungen (SPA), die auf jedem statischen Dateiserver bereitgestellt werden können, erfordern vom Server gerenderte Anwendungen eine Node.js-Serverlaufzeitumgebung.

• Mehr serverseitige Belastung. Das Rendern einer vollständigen Anwendung in Node.js beansprucht offensichtlich mehr CPU-Ressourcen (CPU-intensiv) als ein Server, der nur statische Dateien bereitstellt. Wenn Sie also damit rechnen, sie in einer Umgebung mit hohem Datenverkehr (hoher Datenverkehr) zu verwenden, bereiten Sie bitte Serverlasten vor entsprechend und setzen Sie Caching-Strategien mit Bedacht ein.

Bevor Sie Server-Side-Rendering (SSR) für Ihre Anwendung nutzen, sollten Sie sich zunächst die Frage stellen, ob Sie es wirklich benötigen. Dies hängt hauptsächlich davon ab, wie wichtig die Time-to-Content für die Anwendung ist. Wenn Sie beispielsweise ein internes Dashboard erstellen, spielen ein paar zusätzliche hundert Millisekunden beim ersten Laden keine Rolle, und die Verwendung von serverseitigem Rendering (SSR) wäre eine Selbstverständlichkeit. Allerdings sind die Time-to-Content-Anforderungen eine absolut kritische Messgröße, und in diesem Fall kann Ihnen serverseitiges Rendering (SSR) dabei helfen, eine optimale Leistung beim anfänglichen Laden zu erreichen.

Server Side Rendering vs. Prerendering (SSR vs. Prerendering)

Wenn Sie Server Side Rendering (SSR) nur untersuchen, um die SEO einiger Marketingseiten (z. B. /, /about, /contact usw.) zu verbessern, Dann ist möglicherweise ein Vorrendern erforderlich. Anstatt einen Webserver zu verwenden, um HTML dynamisch in Echtzeit zu kompilieren, werden beim Pre-Rendering einfach statische HTML-Dateien für bestimmte Routen zur Erstellungszeit generiert. Der Vorteil besteht darin, dass die Einrichtung des Prerenderings einfacher ist und Sie Ihr Frontend als vollständig statische Site behandeln können.

Verwandte kostenlose Lernempfehlungen: JavaScript(Video)

Das obige ist der detaillierte Inhalt vonWas ist serverseitiges Rendering von vue.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!