ISR ist eine Hybrid -Rendering -Methode in Next.js, die für die SEO und die Verbesserung der Benutzererfahrung nützlich ist. In diesem Artikel werde ich erklären, wie ISR in Next.js funktioniert, Beispiele für die Implementierung von ISR sowohl im Seitenrouter als auch im App -Router und schließlich einige gemeinsame Fragen zu ISR in Next.js.

angehen.

Was ist ISR?

isr ist eine Hybrid -Rendering -Methode in Next.js. Es regeneriert statische Seiten in bestimmten Abständen, was bei der SEO hilft und die Benutzererfahrung verbessert, indem Inhalte auf dem neuesten Stand gehalten werden, ohne die gesamte Website wieder aufzubauen.

Wie verbessert ISR die SEO- und Benutzererfahrung?

Wenn Sie React.js oder eine herkömmliche einseitige Anwendung (SPA) verwendet haben, wissen Sie, dass es in einem Spa normalerweise nur eine HTML -Datei gibt. Wenn ein Benutzer zum ersten Mal eine SPA -Website besucht, sendet das SPA eine minimale HTML -Datei (in React ist dies normalerweise index.html). Danach holt es CSS, JavaScript und andere Ressourcen ab, die für die angeforderte Seite benötigt werden. Diese Ressourcen werden dann in die HTML gerendert und kombiniert, sobald sie den Kunden (den Browser) erreicht haben. Wie bereits erwähnt, enthält die von einem Spa gesendete erste HTML -Datei nur wenig bis gar keinen Inhalt.

.

Stellen Sie sich nun einen Google -Bot vor, der die Website anstelle eines Benutzers anfordert. Während moderne Google -Bots JavaScript ausführen können, um Inhalte abzurufen, kann es sich nur negativ auf die SEO auswirken. Der Bot sieht möglicherweise die anfängliche HTML als leer an, die die Indizierung des Seiteninhalts verzögern und möglicherweise Ihren Suchrankings schädigen.

next.js löst dies durch die Verwendung von Server-Seite-Rendering-Techniken wie Server-Vorrendern. Wir werden später über das im Detail im Detail sprechen, aber hier ist ein kurzer Überblick. Mit dem Vorrendern des Servers wird die HTML für jede Route auf dem Server generiert und direkt an den Client gesendet. Die CSS- und JavaScript -Dateien werden normalerweise gebündelt und zwischengespeichert.

Wenn ein Benutzer oder ein Google -Bot die Website besucht, sehen sie sofort eine vollständig gerenderte Seite. Dies verbessert die SEO, da der Google -Bot den Inhalt in der HTML sofort erkennen kann. Es verbessert auch die Benutzererfahrung durch Beschleunigung der Seite Ladevorgänge. Die Benutzer müssen nicht darauf warten, dass der Inhalt dynamisch geladen wird.

Wie funktioniert ISR?

Wenn Sie besser verstehen möchten, wie ISR (inkrementelle statische Regeneration) funktioniert, lassen Sie mich mit einem Beispiel erklären. Stellen Sie sich vor, Sie sind ein Administrator, der eine Liste von Blogs auf Ihrer Website verwaltet. Sie möchten Ihr Projekt nicht jedes Mal wieder aufbauen, wenn Sie einen neuen Blog veröffentlichen. Stattdessen möchten Sie, dass Ihre Blog -List -Seite alle 60 Sekunden automatisch aktualisiert. Wenn Sie also einen neuen Blog schreiben, möchten Sie, dass es angezeigt wird, ohne Ihr Projekt manuell wieder aufzubauen. Hier kommt ISR ins Spiel. Während Sie Methoden wie SSR (Server-Side-Rendering) verwenden können, ist ISR der richtige Weg, wenn Ihre Website in bestimmten Abständen aktualisiert wird. Wir werden später über SSR sprechen.

Nehmen wir nun an, Sie implementieren ISR auf Ihrer Bloglist -Seite und setzen die Neubearbeitungszeit auf 60 Sekunden. Sie bauen Ihr Projekt zum ersten Mal auf und der Neuaufbau -Timer beginnt. Ein Benutzer besucht Ihre Website, geht zur Blog -List -Seite und sieht die aktuelle Liste der Blogs. In der Zwischenzeit veröffentlichen Sie einen neuen Blog-Beitrag, aber da im 60-Sekunden-Fenster noch 20 Sekunden übrig sind, werden neue Benutzer, die die Website besuchen, das neue Blog noch nicht sehen.

Sobald die 60 Sekunden abgelaufen sind, überprüft ISR nach neuen Daten, sieht, dass es einen neuen Blog -Beitrag gibt, und regeneriert die statische Seite mit dem aktualisierten Inhalt. Anschließend zwischen den neuen Versionen auf dem Server zwischengewertet. Hier ist etwas Wichtiges zu beachten: Während ISR die Seite regeneriert, sehen Benutzer die alte Version immer noch, bis der neue bereit ist. Nach dem Abschluss von ISR werden neue Besucher die aktualisierte Seite sehen, aber Benutzer, die bereits vor der Neuauflagen auf der Website waren, werden die alte Seite weiterhin sehen, es sei denn, sie aktualisieren sie.

Eine weitere wichtige Sache ist, dass beim Erstellen Ihrer Website Ihre Website mit NPM Run Build erstellt wird, die erste statische Seite von SSG (statische Site -Generierung) und nicht von ISR generiert wird. Nach dem ersten Build tritt ISR ein, um den Regenerationsprozess zu bewältigen. Außerdem regeneriert ISR Ihre gesamte Website nicht. Es regeneriert nur die spezifische Seite, auf der ISR implementiert wird. Wenn sich ISR regeneriert, wird nur diese spezifische Seite aktualisiert, nicht das gesamte Projekt.

So implementieren Sie ISR im App -Router

Um ISR (inkrementelle statische Regeneration) im App -Router zu implementieren, ist es wichtig zu wissen, dass ISR in Serverkomponenten und nicht in Clientkomponenten verwendet werden muss. Dies liegt daran, dass ISR eine Server-Rendering-Methode ist, keine clientseitige. Sie sollten also ISR in Dateien wie App/blog/page.tsx oder app/blog/page.jsx platzieren.

Ein wichtiger Punkt, an den Sie sich erinnern sollten, ist, dass ISR nicht funktioniert, wenn Sie Ihre API nicht in der Serverkomponente aufrufen, in der die Option Neuauflagen festgelegt ist. Die Serverkomponente muss in der Lage sein, neue Daten zu holen, um die Seite zu regenerieren. Andernfalls werden keine Aktualisierungen stattfinden.

Um ISR zu aktivieren, müssen Sie lediglich die Neubeschaffung der Fetch -Methode hinzufügen. Wenn Sie es vorziehen, Axios anstelle von Fetch zu verwenden, können Sie sie dennoch verwenden, indem Sie die Anforderung ähnlich konfigurieren. Im Moment werde ich mich bei der Verwendung von Fetch halten. Vielleicht werde ich später erklären, wie es mit Axios geht.

Ich habe ein Beispiel mit TSX -Datei und JSX Fiel angegeben:

Dies ist ein Beispiel für die Implementierung in TSX -Datei

Dies ist ein Beispiel für die Implementierung in JSX -Datei:

Wie implementiere ich ISR im Seitenrouter?

Um ISR im Seitenrouter zu implementieren, müssen Sie GetStaticProps aus Ihrer Komponente exportieren und der Eigenschaft zu dieser Funktion hinzufügen. Diese Funktion läuft nur während des serverseitigen Renderings. Sie müssen daher sicherstellen, dass Ihre API in GetStaticProps aufgerufen wird. Wie im vorherigen Abschnitt erwähnt, können Sie Fetch oder Axios verwenden, um Ihre Daten abzurufen. Beachten Sie jedoch, dass der API -Anruf in GetStaticProps getätigt werden muss, sonst funktioniert ISR nicht.

Diese Funktion wird erneut auf dem Server ausgeführt, nicht auf dem Client. Hier ist ein Beispiel zu demonstrieren:

Dies ist ein Beispiel für die Implementierung in der TSX -Datei:

Dies ist ein Beispiel für die Implementierung in JSX -Datei:

Abschluss

isr in Next.js ist eine Server -Rendering -Methode, die sowohl SEO- als auch Benutzererfahrung verbessert.

Sie können Ihre Komponente mit anderen Methoden wie SSR oder SSG erstellen, aber manchmal wird ISR für bestimmte Anwendungsfälle benötigt.

Sie müssen ein gutes Verständnis dafür haben, was ISR ist, wie es funktioniert und wie Sie es sowohl im Seitenrouter als auch im App -Router implementieren können. In diesem Artikel habe ich versucht, es so klar wie möglich zu erklären, und ich werde es später aktualisieren, wenn ich es noch besser erklären kann. Wenn irgendetwas unklar ist, lassen Sie es mich bitte wissen, indem Sie einen Kommentar hinterlassen, und ich werde weitere Klarstellung angeben.

Danke, dass du diesen Blog gelesen hast, und ich hoffe es hat dir gefallen!