On-Demand-ISR in Next.js oder wie man statische Inhalte auf der Website effektiv aktualisiert, die vom CMS oder Admin kommen

Hallo alle. Mein Name ist Misha Yakubchuk, ich bin ein Frontend-Entwickler aus MetaLamp­čĺí.

In diesem Artikel werde ich Ihnen erz├Ąhlen, wie und warum wir bei einem meiner Projekte ein neues Next.js-Feature geschraubt haben ÔÇô On-Demand ISR (inkrementelle statische Regeneration bei Bedarf).

Problem

An einem der sch├Ânen sonnigen Tage kam ein Kunde mit der Anfrage zu uns, ein schl├╝sselfertiges Projekt (Front-End, Back-End, Designs etc.) fertigzustellen. Eine der Anforderungen war das Admin-Panel, in dem der Kunde neben einer Vielzahl unterschiedlicher Funktionen die M├Âglichkeit haben wollte, SEO-Informationen f├╝r die Seiten der Website einzugeben und zu bearbeiten. Dies betraf sowohl statische Seiten (ÔÇ×HomeÔÇť, ÔÇ×ProjekteÔÇť) als auch dynamische Seiten f├╝r ein bestimmtes Projekt, die ebenfalls im Admin-Panel erstellt, bearbeitet und gel├Âscht wurden. Das hei├čt, der Administrator k├Ânnte nach Belieben die Werte von Meta-Tags f├╝r jede Seite ├Ąndern, und die neuen Werte sollten auf der bereits bereitgestellten Website angezeigt worden sein.

Was wir bereits wissen

Entwickler, die Next.js verwenden, sind wahrscheinlich mit getStaticProps vertraut und sind wahrscheinlich mit dem regul├Ąren ISR vertraut.

Die getStaticProps-Funktion wird w├Ąhrend der Projekterstellung auf einer Seite aufgerufen und generiert statisches HTML f├╝r diese Seite, das Crawlern sofort zur Verf├╝gung steht. So k├Ânnen wir innerhalb dieser Funktion beispielsweise SEO-Daten aus dem Admin-Panel oder andere Informationen anfordern, die wir in statisches HTML einf├╝gen m├╝ssen. Hier ein Beispiel f├╝r die Homepage:

Ein Beispiel f├╝r die Verwendung der getStaticProps-FunktionEin Beispiel f├╝r die Verwendung der getStaticProps-Funktion

Gro├čartig, wir haben die Daten erhalten, das Projekt wurde zusammengestellt, die Site wurde bereitgestellt. Wie kann man nun die Daten aktualisieren, wenn sie sich im Admin-Panel ├Ąndern?

Der aktuelle Ansatz und seine M├Ąngel

Next.js unterst├╝tzt seit einigen Jahren die sogenannte ISR (Incremental Static Regeneration). Um diese Funktion zu aktivieren, geben Sie einfach die revalidate-Eigenschaft in getStaticProps mit einem numerischen Wert in Sekunden an:

Screenshot aus der Next.js-DokumentationScreenshot aus der Next.js-Dokumentation

Jedes Mal, wenn die angegebene Zeit verstrichen ist und der Benutzer die Seite betritt, wird der Next.js-Server die Seite mit einem neuen Aufruf von getStaticProps regenerieren (neu erstellen), was neue Daten aus dem Admin-Panel bedeutet. W├Ąhrend der Regenerierung wird den Benutzern die alte Seite angezeigt und danach eine neue mit ge├Ąnderten Daten. All dies geschieht im Hintergrund und erfordert keinen Neuaufbau des gesamten Projekts. Dieser Mechanismus ist ausf├╝hrlich beschrieben in Dokumentation.

Obwohl dies unser Problem l├Âst, ist es leider eine ziemliche Kr├╝cke und es gibt gro├če ABER:

  • Wenn niemand die Seite besucht oder anfordert, wird sie nicht neu generiert und erh├Ąlt dementsprechend keine neuen Daten vom Administrator, die sich ge├Ąndert haben k├Ânnten.

  • Was ist, wenn wir viel Verkehr und eine gro├če Anzahl von Seiten auf der Website haben? Ja, und mit Mehrsprachigkeit. Sagen wir 50 Seiten in 3 Sprachen. Das sind schon 150 Anfragen an den Server mit einer bestimmten Frequenz. Au├čerdem werden 98% dieser Anfragen komplett redundant sein, da der Admin die Daten auf 150 Seiten definitiv nicht so oft ├Ąndern wird.

Eigentlich m├╝ssen wir die Seite nur neu generieren, wenn der Administrator die Informationen ge├Ąndert hat. Das hei├čt, auf Anfrage.

Lang lebe On-Demand-ISR.

Genau das haben die Next.js-Entwickler in Version 12.1.0 als Beta (Februar 2022) hinzugef├╝gt und die stabile Version in 12.2.0 (Juni 2022) freigegeben. Wie die Entwickler selbst sagen, war dies eines der am h├Ąufigsten nachgefragten Features in letzter Zeit und sie waren gl├╝cklich (wie wir), es endlich bereitzustellen.

Und so brauchen wir jetzt, dass das Backend, nachdem der Admin ├änderungen vorgenommen und auf die Schaltfl├Ąche ÔÇ×SpeichernÔÇť geklickt hat, eine Anfrage an das Frontend sendet, die sie verarbeitet und veranlasst, dass die erforderliche Seite neu generiert wird.

Dazu f├╝gen wir im Projekt Next.js die Datei revalidate.ts im Pfad src/pages/api hinzu:

Beispiel f├╝r die Verarbeitung einer Anfrage zur RegenerationBeispiel f├╝r die Verarbeitung einer Anfrage zur Regeneration

Hier wird die Anfrage gestellt, dh die Anfrage wird innerhalb der Handler-Funktion verarbeitet.

Die Neugenerierung selbst erfolgt durch Aufruf der Funktion res.unstable_revalidate(), wobei den Parametern der Pfad zur neu zu generierenden Seite ├╝bergeben werden muss. Zum Beispiel res.unstable_revalidate(‘/ru/project/24’).

Notiz

Das Projekt wurde auf Next.js 12.1.0 geschrieben, wo sich diese Funktionalit├Ąt in der Beta-Phase befand, sodass die Funktion das Pr├Ąfix unstable hat. Ab Version 12.2.0 hei├čt die Funktion einfach revaldate.

Es ist notwendig, dass sich Backend und Frontend auf die Struktur des Request-Body einigen, um zu bestimmen, welche Seite neu generiert werden muss. In unserem Fall war die Struktur wie folgt:

  • secret ist ein privater Schl├╝ssel, dessen Wert mit dem Wert aus der Umgebungsvariable auf der Vorderseite verglichen wird und bei Nicht├╝bereinstimmung ein Fehler generiert wird.

  • key – ein Schl├╝ssel, der den Namen der neu zu generierenden Seite enth├Ąlt.

  • lang – die Sprache der Seite, da unsere Website mehrsprachig ist und f├╝r jede Sprache eine separate Seite erstellt wird.

  • id – spezifische Seiten-ID f├╝r dynamische Seiten.

Der Pfad zur zu aktualisierenden Seite wird in der Variable revalidatePage gebildet und dann an den Funktionsaufruf res.unstable_revalidate() ├╝bergeben. Der Next.js-Server startet eine Seitenaktualisierung mit einem neuen Aufruf von getStaticProps und einer Anforderung an den Server f├╝r neue Informationen.

Das ist alles, der Inhalt auf der Seite wird nur aktualisiert, wenn wir ihn brauchen, der Server wird nicht mit unn├Âtigen Anfragen ├╝berlastet, alle sind gl├╝cklich.

Ich hoffe, dieser Artikel war n├╝tzlich und konnte jemandem helfen. Allen einen sch├Ânen Tag ­čÖé

Link zur Dokumentation:

Similar Posts

Leave a Reply

Your email address will not be published.