Dynamisches vs. Statisches Rendering

Großartige Arbeit! Wir haben einige Daten erhalten und erfolgreich dem Benutzer angezeigt. Allerdings sind wir auf ein Problem gestoßen. Das Problem rührt von unserem statischen Dashboard her, was bedeutet, dass Aktualisierungen der Daten nicht in der Anwendung widergespiegelt werden.

Lassen Sie uns in die Konzepte des statischen und dynamischen Renderings eintauchen.

Statisches Rendering

Statisches Rendering bedeutet, Inhalte vorzubereiten und anzuzeigen, bevor ein Benutzer überhaupt danach fragt. Es ist, als würde man eine Menge Sandwiches machen, bevor die Leute zu einer Party kommen.

Beispiel

Stellen Sie sich vor, Sie veranstalten ein Picknick. Anstatt Sandwiches zu machen, wenn die Gäste ankommen, bereiten Sie eine Menge Sandwiches im Voraus zu und legen sie auf einen Tisch. Wenn die Leute kommen, nehmen sie sich ein vorgefertigtes Sandwich. Das macht es für alle schneller und einfacher.

Vorteile

• Schnellere Websites: Wie bei fertigen Sandwiches kann vorgefertigter Inhalt schnell und einfach an Benutzer geliefert werden;
• Weniger Arbeit für den Server: Da alles im Voraus vorbereitet ist, muss der Server keine Sandwiches (Inhalte generieren) für jede Person machen, die ankommt;
• Bessere Suchmaschinen-Rankings: Suchmaschinen finden es einfacher, vorgefertigte Inhalte zu verstehen und zu bewerten, ähnlich wie bei einem gut organisierten Picknicktisch.

Anwendungsfälle

Statisches Rendering ist ideal für Dinge wie statische Blogbeiträge oder Produktseiten, bei denen der Inhalt größtenteils gleich bleibt und für alle gleich ist.

Dynamisches Rendering

Dynamisches Rendering bedeutet, Inhalte spontan zu erstellen, wenn Benutzer sie anfordern. Es ist wie ein Koch, der für jeden Kunden im Restaurant personalisierte Gerichte zubereitet.

Beispiel

Stellen Sie sich ein Restaurant vor, in dem der Koch die Mahlzeiten basierend auf den Bestellungen der Kunden zubereitet. Der Koch erhält Anfragen, kocht das Essen und serviert es frisch. Dies ist wie dynamisches Rendering, bei dem Inhalte für jeden Benutzer, der eine Seite besucht, generiert werden.

Vorteile

• Echtzeit-Updates: Genau wie ein Koch ein Gericht mit frischen Zutaten zubereiten kann, ermöglicht dynamisches Rendering Ihrer Anwendung, Echtzeit- oder häufig aktualisierte Daten anzuzeigen;
• Personalisierte Inhalte: Wie ein Koch, der Gerichte basierend auf den Vorlieben der Kunden zubereitet, eignet sich dynamisches Rendering hervorragend, um personalisierte Inhalte wie Dashboards oder Benutzerprofile anzuzeigen;
• Zugriff auf benutzerspezifische Informationen: Es ist wie ein Koch, der die Kunden nach ihren Vorlieben fragt, bevor er kocht – dynamisches Rendering ermöglicht es Ihnen, auf Informationen zuzugreifen, die für jeden Benutzer spezifisch sind, wie Cookies oder URL-Suchparameter.

Anwendungsfälle

Dynamisches Rendering ist nützlich für Anwendungen, bei denen sich Daten häufig ändern oder personalisierte Inhalte wichtig sind, wie z. B. Social-Media-Feeds oder Echtzeit-Dashboards.

Zurück zum Projekt

Für unsere App bevorzugen wir es immer, die aktuellsten Informationen anzuzeigen.

Bei der Verwendung von @vercel/postgres sind die Caching-Regeln nicht vordefiniert, was uns die Flexibilität gibt, zu entscheiden, wie Daten gehandhabt werden – ob statisch oder dynamisch.

Um das Dashboard dynamisch zu gestalten, können wir eine Funktion in Next.js namens unstable_noStore verwenden. Sie ermöglicht es uns, das statische Rendering zu überspringen. So geht's:

Fügen Sie in der Datei data.ts die Zeile import unstable_noStore from next/cache am Anfang ein. Verwenden Sie es dann in den Datenabruf-Funktionen, um anzupassen, wie die Daten gehandhabt werden.

In der Praxis