Vorteile der Verwendung von Angular Universal: Serverseitiges Rendering

Angular Universal ist eine Technologie, die von Google entwickelt wurde, um Anwendungen, die in Angular erstellt wurden, serverseitig zu rendern. Das Hauptziel von Angular Universal ist es, den Prozess der ersten Seitenladung zu beschleunigen. Dies erweist sich als sehr nützlich, vor allem wenn man bedenkt, dass die Ladegeschwindigkeit einer Webseite ein entscheidender Faktor für das Nutzererlebnis und die SEO ist.

Ohne Serverseitige Rendering (SSR) wird die gesamte Anwendung auf der Client-Seite gerendert, was zu längeren Ladezeiten führen kann. Mit SSR wird jedoch die erste Seite der Anwendung bereits auf dem Server erstellt und in vollständigem HTML an den Client gesendet. Dies führt zu einer erheblichen Verbesserung der Zeit bis zur ersten Inhaltsdarstellung (First Contentful Paint - FCP), was letztlich das Nutzererlebnis verbessert.

Ein weiterer wichtiger Vorteil von SSR mit Angular Universal ist es, dass es den Crawling-Prozess für Suchmaschinen einfacher und genauer macht. Da der gesamte Inhalt der Seite beim SSR im Quellcode der Seite vorhanden ist, ist es für Suchmaschinen einfacher, den Inhalt zu lesen und zu indizieren.

Hier ein einfaches Beispiel, das die Verwendung von Angular Universal zeigt:

// server.ts
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { AppServerModule } from './src/main.server';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

In diesem Beispiel wird ngExpressEngine verwendet, um die Seiten auf dem Server zu rendern. Mit res.render wird die erste Seite der Anwendung bereits auf dem Server erstellt und an den Client gesendet.

Zusammenfassend lässt sich sagen, dass Angular Universal durch die Verbesserung sowohl des Nutzererlebnisses als auch der SEO eine wichtige Rolle beim Bau von Angular-Anwendungen spielt. Es ist daher eine gute Praxis, dessen Verwendung in Betracht zu ziehen.