Statisches und dynamisches Rendering

Im vorherigen Kapitel haben Sie Daten für die Dashboard-Übersichtsseite abgerufen. Allerdings haben wir kurz zwei Einschränkungen des aktuellen Setups besprochen:

1. Die Datenanfragen verursachen unbeabsichtigte Wasserfalleffekte.
2. Das Dashboard ist statisch, daher werden Datenaktualisierungen nicht in Ihrer Anwendung angezeigt.

Was ist statisches Rendering?

Beim statischen Rendering erfolgen das Abrufen der Daten und das Rendering auf dem Server zum Build-Zeitpunkt (beim Deployment) oder beim Revalidieren der Daten.

Wenn ein Benutzer Ihre Anwendung besucht, wird das zwischengespeicherte Ergebnis bereitgestellt. Statisches Rendering bietet mehrere Vorteile:

• Schnellere Websites - Vorgerenderte Inhalte können bei der Bereitstellung auf Plattformen wie Vercel zwischengespeichert und global verteilt werden. Dadurch wird sichergestellt, dass Benutzer weltweit schneller und zuverlässiger auf die Inhalte Ihrer Website zugreifen können.
• Geringere Serverlast - Da die Inhalte zwischengespeichert werden, muss der Server sie nicht für jede Benutzeranfrage dynamisch generieren. Dies kann die Rechenkosten senken.
• SEO - Vorgerenderte Inhalte sind für Suchmaschinen-Crawler einfacher zu indexieren, da die Inhalte bereits beim Laden der Seite verfügbar sind. Dies kann zu besseren Suchmaschinenrankings führen.

Statisches Rendering eignet sich für Benutzeroberflächen ohne Daten oder mit Daten, die für alle Benutzer gleich sind, wie z.B. ein statischer Blogbeitrag oder eine Produktseite. Es ist möglicherweise nicht ideal für ein Dashboard mit personalisierten Daten, die regelmäßig aktualisiert werden.

Das Gegenteil von statischem Rendering ist dynamisches Rendering.

Was ist dynamisches Rendering?

Beim dynamischen Rendering werden die Inhalte auf dem Server für jeden Benutzer zum Anfragezeitpunkt (wenn der Benutzer die Seite besucht) gerendert. Dynamisches Rendering bietet mehrere Vorteile:

• Echtzeitdaten - Dynamisches Rendering ermöglicht es Ihrer Anwendung, Echtzeit- oder häufig aktualisierte Daten anzuzeigen. Dies ist ideal für Anwendungen, bei denen sich die Daten oft ändern.
• Benutzerspezifische Inhalte - Es ist einfacher, personalisierte Inhalte wie Dashboards oder Benutzerprofile bereitzustellen und die Daten basierend auf Benutzerinteraktionen zu aktualisieren.
• Informationen zum Anfragezeitpunkt - Dynamisches Rendering ermöglicht den Zugriff auf Informationen, die erst zum Anfragezeitpunkt bekannt sind, wie z.B. Cookies oder URL-Suchparameter.

Simulation einer langsamen Datenabfrage

Die Dashboard-Anwendung, die wir erstellen, ist dynamisch.

Allerdings gibt es noch ein Problem, das im vorherigen Kapitel erwähnt wurde. Was passiert, wenn eine Datenanfrage langsamer ist als alle anderen?

Simulieren wir eine langsame Datenabfrage. Kommentieren Sie in app/lib/data.ts die console.log- und setTimeout-Anweisungen in fetchRevenue() aus:

export async function fetchRevenue() {
  try {
    // Wir verzögern die Antwort künstlich für Demonstrationszwecke.
    // Tun Sie dies nicht in der Produktion :)
    console.log('Fetching revenue data...');
    await new Promise((resolve) => setTimeout(resolve, 3000));
 
    const data = await sql<Revenue[]>`SELECT * FROM revenue`;
 
    console.log('Data fetch completed after 3 seconds.');
 
    return data;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

Öffnen Sie nun http://localhost:3000/dashboard/ in einem neuen Tab und beachten Sie, dass die Seite länger zum Laden braucht. In Ihrem Terminal sollten Sie auch folgende Meldungen sehen:

Fetching revenue data...
Data fetch completed after 3 seconds.

Hier haben Sie eine künstliche Verzögerung von 3 Sekunden hinzugefügt, um eine langsame Datenabfrage zu simulieren. Das Ergebnis ist, dass Ihre gesamte Seite blockiert wird und dem Besucher keine Benutzeroberfläche angezeigt wird, während die Daten abgerufen werden. Dies führt uns zu einer häufigen Herausforderung, die Entwickler lösen müssen:

Beim dynamischen Rendering ist Ihre Anwendung nur so schnell wie Ihre langsamste Datenabfrage.