SSG in Next.js beherrschen: So steigern Sie SEO und Benutzererfahrung

SSG (Static Site Generation) ist eine Methode in Next.js, die ISR (Incremental Static Regeneration) ähnelt, aber nur zur Erstellungszeit ausgeführt wird. Sobald die Site erstellt wurde, rendert SSG die Seiten erst beim nächsten Build erneut. In diesem Artikel werde ich näher darauf eingehen, wie SSG in Next.js funktioniert, wie es SEO verbessert und wie es das Benutzererlebnis verbessert.

Was ist SSG?

SSG ist eine Methode in Next.js, die während des Build-Prozesses auf dem Server ausgeführt wird. Es generiert statische Seiten zusammen mit ihrem CSS, JavaScript und zugehörigen Ressourcen und bündelt alles für ein vollständig statisches Erlebnis.

Wie funktioniert SSG?

Um SSG in Ihrem Projekt zu verwenden, müssen Sie die getStaticProps-Methode auf der Seite exportieren, auf der Sie SSG verwenden möchten. Wenn Sie den App-Router verwenden, wird SSG standardmäßig ausgeführt, wenn Sie Ihr Projekt erstellen. Wenn Sie jedoch den Seitenrouter verwenden, müssen Sie getStaticProps.

manuell hinzufügen

Diese Methode erstellt gebündelte statische Seiten. Wenn also ein Benutzer oder ein Crawler eine Seite anfordert, auf der SSG implementiert ist, sendet Next.js eine vollständig vorbereitete Seite mit all ihren Ressourcen. Dadurch entfällt die Notwendigkeit, zusätzliche Assets zu laden, wodurch Verzögerungen minimiert werden, was sich positiv auf SEO und Benutzererfahrung auswirkt.

Für dynamische Routen, wie eine Blog-Detailseite, die einen Slug oder eine ID verwendet, benötigen Sie eine andere Methode, um Daten für diese Seite abzurufen. Bei dieser Methode handelt es sich um getStaticPaths, die während der Erstellungszeit vor getStaticProps ausgeführt wird.

So implementieren Sie SSG im App Router

SSG wird standardmäßig im Next.js App Router implementiert, wenn Sie Ihr Projekt erstellen. Alle Ihre Seiten werden in einem CDN gebündelt und zwischengespeichert, sodass keine zusätzlichen Schritte für statische Routen hinzugefügt werden müssen.

Bei dynamischen Routen, beispielsweise solchen, die Slugs oder IDs verwenden, kann Next.js diese jedoch nicht automatisch zur Erstellungszeit abrufen. Sie müssen diese Listen von einer API oder einer anderen Quelle in Ihrem Projekt beziehen. Hier kommt die Funktion „generateStaticParams“ ins Spiel. Sie ermöglicht es Ihnen, die Liste der Slugs oder IDs für dynamische Routen abzurufen und zurückzugeben, sodass Next.js für jede einzelne statische Seiten generieren kann. Es ist wichtig, sich daran zu erinnern, dass „generateStaticParams“ in einer Serverkomponente und nicht in einer Clientkomponente verwendet werden muss.

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

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

So implementieren Sie SSG im Page Router

Um SSG im Page Router zu implementieren, müssen Sie die Funktion getStaticProps erstellen und sie von der Seite exportieren, auf der Sie SSG implementieren möchten. Diese Funktion wird beim Erstellen des Projekts automatisch aufgerufen.

Wenn Sie eine dynamische Route haben, müssen Sie eine weitere Funktion erstellen und diese exportieren. Diese Funktion wird, wie ich bereits erwähnt habe, vor getStaticProps aufgerufen, und Sie müssen Ihre Daten von einer API abrufen oder eine Liste von IDs oder Slugs aus einer Datei abrufen.

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

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

Abschluss

SSG ist eine nützliche Methode zum Bündeln und Erstellen statischer Seiten. Wenn Sie Ihre Website hinsichtlich SEO und Benutzererfahrung verbessern möchten, empfiehlt sich die Verwendung von SSG, ISR oder SSR.

In diesem Blog habe ich über SSG geschrieben. Ich habe auch einen weiteren Artikel über ISR unter dieser Adresse: Mastering ISR in Next.js. Ich werde später einen weiteren Artikel über SSR schreiben. Wenn Sie Fragen haben, können Sie gerne einen Kommentar hinterlassen. Ich bin hier, um zu helfen. Dieser Blog wird möglicherweise später aktualisiert, da ich das beste Wissen mit Ihnen teilen möchte.

Vielen Dank fürs Lesen! Wenn Sie weitere Artikel lesen möchten, können Sie meiner Website folgen: Saeed Niyabati. Ich hoffe, es hat Ihnen gefallen. Tschüss!

Das obige ist der detaillierte Inhalt vonSSG in Next.js beherrschen: So steigern Sie SEO und Benutzererfahrung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!