Angular: Verbesserung der Anwendungsleistung durch partielle Hydration und SSR

Angular 18 führt Partial Hydration ein, eine leistungsstarke Technik, die die Anwendungsleistung in Verbindung mit Server-Side Rendering (SSR) erheblich verbessert. Dieser Artikel befasst sich mit dem Konzept der teilweisen Flüssigkeitszufuhr, seinen Vorteilen und wie es die in Angular 17 eingeführten aufschiebbaren Ansichten nutzt.

Warum partielle Flüssigkeitszufuhr und SSR wichtig sind

Herkömmliche Angular-Anwendungen leiden oft unter einem Leistungsengpass, wenn das gesamte JavaScript im Voraus geladen wird. Dies kann die anfängliche Ladezeit erheblich beeinträchtigen, insbesondere bei großen und leistungskritischen Anwendungen. Durch die strategische Reduzierung der zu Beginn geladenen Menge an JavaScript können wir die Benutzererfahrung drastisch verbessern.

Teilweise Flüssigkeitszufuhr: Ein intelligenterer Ansatz für SSR

Partielle Hydration baut auf der Grundlage aufschiebbarer Ansichten auf, die in Angular 17 eingeführt wurden. Anstatt einen einfachen Platzhalter auf dem Server zu rendern, kann Angular jetzt den Hauptinhalt eines bestimmten Blocks rendern, der mit @defer markiert ist. So funktioniert es:

1. Serverseitiges Rendering: Der Server rendert den wesentlichen Inhalt der Anwendung zusammen mit dem @defer-Block, der die Komponente enthält.
2. Clientseitige Hydratation:Wenn die Anwendung auf dem Client ausgeführt wird, lädt Angular das erforderliche JavaScript für die verzögerte Komponente herunter.
3. Selektive Aktivierung: Die zurückgestellte Komponente wird nur dann interaktiv, wenn sie bestimmte Bedingungen erfüllt, wie z. B. das Betreten des Ansichtsfensters des Benutzers.

Dieser Ansatz bietet mehrere Vorteile:

• Schnellere anfängliche Ladezeiten: Durch die Verzögerung von unnötigem JavaScript erleben Benutzer ein schnelleres anfängliches Laden der Seite.
• Verbesserte Wahrnehmung: Die Anwendung fühlt sich reaktionsschneller an, da Kernfunktionen sofort verfügbar sind.
• Reduzierter Datenverbrauch: Kleinere anfängliche JavaScript-Nutzlasten führen zu einem geringeren Datenverbrauch.

Teilweise Flüssigkeitszufuhr aktivieren

Die Verwendung einer teilweisen Flüssigkeitszufuhr ist unkompliziert. Hier ist ein Beispiel:

{
  @defer (render on server; on viewport) {
    <my-deferrable-component></my-deferrable-component>
  }
}

In diesem Beispiel:

• my-deferrable-component wird auf dem Server gerendert.
• Clientseitig lädt Angular das erforderliche JavaScript für die Komponente herunter.
• Die Interaktion mit „my-deferrable-component“ erfolgt nur, wenn sie in das Ansichtsfenster eintritt, wodurch Rendering und Leistung optimiert werden.

Abschluss

Teilweise Hydratation ermöglicht es Angular-Entwicklern, leistungsstarke und benutzerfreundliche Anwendungen zu erstellen. Durch die strategische Verzögerung der Komponentenhydrierung basierend auf Benutzerinteraktion oder Sichtbarkeit sorgt Angular 18 für ein reibungsloses und reaktionsfähiges Benutzererlebnis, insbesondere bei komplexen und datenintensiven Anwendungen.

Das obige ist der detaillierte Inhalt vonAngular: Verbesserung der Anwendungsleistung durch partielle Hydration und SSR. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!