Sehr gut gemacht! Wir haben einige Daten abgerufen und erfolgreich dem Benutzer angezeigt. Allerdings sind wir auf ein Problem gestoßen. Das Problem liegt an unserem statischen Dashboard, was bedeutet, dass Aktualisierungen der Daten nicht in der Anwendung angezeigt werden.

Lassen Sie uns die Konzepte des statischen und dynamischen Renderings näher betrachten.

Statisches Rendering

Statisches Rendering bedeutet, Inhalte vorzubereiten und anzuzeigen, bevor ein Benutzer überhaupt danach fragt. Es ist, als würde man eine Reihe von Sandwiches vorbereiten, bevor die Gäste zu einer Party kommen.

Beispiel

Stellen Sie sich vor, Sie veranstalten ein Picknick. Anstatt die Sandwiches erst zuzubereiten, wenn die Gäste eintreffen, bereiten Sie vorher eine Reihe von Sandwiches vor und legen sie auf einen Tisch. Wenn die Leute kommen, nehmen sie sich ein bereits fertiges Sandwich. Das macht es für alle schneller und einfacher.

Vorteile

• Schnellere Websites: Wie bei fertigen Sandwiches kann vorbereiteter Inhalt schnell und einfach an Benutzer ausgeliefert werden;
• Weniger Belastung für den Server: Da alles im Voraus vorbereitet wird, muss der Server nicht für jeden Besucher Sandwiches (Inhalte) erstellen;
• Bessere Platzierung in Suchmaschinen: Suchmaschinen können vorbereitete Inhalte leichter verstehen und bewerten, ähnlich wie ein gut organisierter Picknicktisch.

Anwendungsfälle

Statisches Rendering eignet sich hervorragend für Dinge wie statische Blogbeiträge oder Produktseiten, bei denen sich der Inhalt kaum ändert und für alle gleich ist.

Dynamisches Rendering

Dynamisches Rendering bedeutet, Inhalte in Echtzeit zu erstellen, sobald Nutzer sie anfordern. Es ist vergleichbar mit einem Koch, der für jeden Gast im Restaurant individuelle Gerichte zubereitet.

Beispiel

Stellen Sie sich ein Restaurant vor, in dem der Koch die Gerichte je nach Bestellung der Gäste frisch zubereitet. Der Koch erhält die Bestellung, kocht das Gericht und serviert es direkt. Das entspricht dem dynamischen Rendering, bei dem Inhalte für jeden Nutzer individuell generiert werden, der eine Seite besucht.

Vorteile

• Echtzeit-Aktualisierungen: Wie ein Koch Gerichte mit frischen Zutaten zubereitet, ermöglicht dynamisches Rendering Ihrer Anwendung die Anzeige von Echtzeitdaten oder häufig aktualisierten Informationen;
• Personalisierte Inhalte: Wie ein Koch Gerichte nach den Vorlieben der Gäste zubereitet, eignet sich dynamisches Rendering hervorragend zur Anzeige personalisierter Inhalte wie Dashboards oder Nutzerprofile;
• Zugriff auf nutzerspezifische Informationen: Es ist, als würde der Koch die Gäste nach ihren Vorlieben fragen, bevor er kocht – dynamisches Rendering ermöglicht den Zugriff auf nutzerspezifische Informationen 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, stets die aktuellsten Informationen anzuzeigen.

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

Um das Dashboard dynamisch zu gestalten, können wir in Next.js die Funktion unstable_noStore verwenden. Sie ermöglicht es, das statische Rendering zu überspringen. So funktioniert es:

Fügen Sie in der Datei data.ts die Zeile import unstable_noStore from next/cache am Anfang ein. Verwenden Sie diese dann in den Datenabruffunktionen, um das Verhalten der Daten individuell anzupassen.

In der Praxis