Home Blogs Eine Anleitung zur inkrementellen statischen Regeneration
Applications

Eine Anleitung zur inkrementellen statischen Regeneration

About The Author

Outline

Zum Verständnis der inkrementellen statischen Generierung sollten Sie die Erläuterung durch ein Szenario leiten, in dem eine vom Benutzer angeforderte Seite beim statischen Exportieren der Website nicht vorgerendert wurde. In einem solchen Fall wird eine Fallback-Seite bereitgestellt, während die Daten geladen werden. Nach Abschluss der Erstellung der Seite mit den abgerufenen Daten wird die Seite dann auf dem Server zwischengespeichert. Jeder Benutzer, der die Seite anfordert, überspringt dann die Fallback- und Ladephasen und sieht die erstellte Seite direkt. Super!

Die Regenerierung wird vom Konzept der veralteten Revalidierung inspiriert, bei der veraltete Daten in regelmäßigen Abständen von „Revalidierung“-Sekunden aktualisiert werden. Für Seiten, für die der Wert staleWhileRevalidateSeconds konfiguriert ist, werden sie nach regelmäßigen Intervallen des konfigurierten Werts neu erstellt.

Weitere Informationen finden Sie in den ausführlichen Anleitungen zu ISR unter: Inkrementelle statische Regeneration: Ihre Vorteile und ihre Fehler sowie In Einem vollständigen Leitfaden zur inkrementellen statischen Regeneration (ISR) mit Next.js.

Erste Schritte mit ISG in Nuxt.js mit Layer0 (jetzt Edgio)

In diesem Abschnitt wird beschrieben, wie ISG mit Layer0 und Nuxt.js implementiert wird. Die Schritte umfassen die Konfiguration einer Nuxt-App mit Layer0, das Erstellen dynamischer Seiten- und api-Routen und schließlich die Verwendung von Layer0-Konfigurationen, um ISG in Aktion zu sehen.

Konfigurieren der Nuxt.js-App mit Layer0

Erstellen Sie eine Nuxt.js-App mit dem folgenden Befehl:

				
					npm create nuxt-app layer0-nuxt-isg-example

				
			
  • Wählen Sie unter Benutzerdefiniertes Server-Framework wählen Sie keine aus
  • Wählen Sie für den Rendering-Modus wählen Sie Universal (SSR) aus. (Hinweis: Falls Sie bereits eine Nuxt-App haben, behalten Sie einfach die oben genannten Konfigurationen bei.)
  • Installieren Sie die Layer0-CLI:
				
					npm i -g @layer0/cli
				
			
  • Fügen Sie in nuxt.config.js@layer0/nuxt/Module zu buildModules hinzu :
				
					module.exports = {
  ...
  buildModules: [['@layer0/nuxt/module', { layer0SourceMaps: true }]],
  ...
}
				
			
  • Führen Sie folgende Schritte aus, um Nuxt 2 nahtlos in Layer0 (Edgio) zu integrieren:
				
					layer0 init
				
			

Führen Sie die Nuxt.js-App lokal auf Layer0 aus

				
					layer0 dev
				
			

Dynamische Seiten- und api-Routen werden erstellt

1. Richten Sie dynamische Seitenrouten ein

Mit Nuxt lassen sich dynamische Seiten ganz einfach erstellen . Um eine dynamische Route einzurichten, erstellen Sie eine Datei _slug.vue im Ordner some-Route im Verzeichnis Pages Ihrer App.

Um den dynamischen Parameter Slug abzurufen, stellt Nuxt einen Datenabruf asyncData bereit, der Zugriff auf das Kontextobjekt hat. Beispiel: Auf der folgenden dynamischen Seite Pages/some-Route/_slug.vue kann man den Slug über params.slug abrufen, um Aufrufe zum Abrufen von Daten durchzuführen, bevor die Seite wiedergegeben wird.

				
					export default {
  mounted() {
    // For a client side transition, fetch the page again to cache it on the edge
    if (typeof window !== 'undefined') {
      fetch(`/some-route/${this.slug}`)
    }
  },
  async asyncData({ req, params, redirect }) {
    let link = undefined
    // If in browser (i.e. on client side)
    if (typeof window !== 'undefined') {
      link = window.location.origin
    }
    // If on server side (either on Layer0 or on local)
    else {
      let hostURL = req ? req.headers.host : process.env.API_URL
      // You have access to req.headers.host when running npm run dev
      // You have access to process.env.API_URL on Layer0 env after deployment, but there is no req header
      // Why's that? It's an added benefit of being on Layer0, as the project is compiled with target: 'static',
      // Which removes the req object from asyncData in nuxt to produce a full static application.
      // This rather is the beauty to ISG with Nuxt.js and Layer0, that you can combine full static site with
      // server side capabilities
      if (hostURL) {
        hostURL = hostURL.replace('http://', '')
        hostURL = hostURL.replace('https://', '')
        if (hostURL.includes('localhost:')) {
          link = `http://${hostURL}`
        } else {
          link = `https://${hostURL}`
        }
      }
    }
    let resp = await fetch(`${link}/api/some-route/${params.slug}.json`)
    if (!resp.ok) {
      redirect(404, '/error-page')
    }
    let data= await resp.json()
    return {
      data,
      slug: params.slug
    }
  },
}
				
			

2. Richten Sie dynamische api-Routen ein

Zum Einrichten dynamischer api-Routen stellt nuxt eine Server-Middleware bereit, die Express auch erweitern kann, wodurch REST-Endpunkte erstellt werden können. Beispiel: Der folgende Server-Middleware/Rest.js ruft Daten für alle Endpunkte ab, die mit /api/some-Route/ beginnen und mit .json enden .

				
					const express = require('express')
const app = express()

app.use(express.json())
app.all('/api/some-route/:slug.json', (req, res) => {
const slug = req.params.slug
// some data fetching calls from the slug
res.json({ data: 'data' })
})

module.exports = app
				
			

Edgio ISG Leckereien

Verwenden Sie für ISG Routes.js (automatisch durch den Befehl layer0 init erstellt), und fügen Sie Route für die dynamischen Seiten /some-Route/_slug.vue und die dynamische api-Route /api/some-Route/:slug.json hinzu :

				
					// This file was added by layer0 init.
// You should commit this file to source control.
let example = "test " + qa
const { Router } = require("@layer0/core/router")
const { nuxtRoutes } = require("@layer0/nuxt")
const IF_PRODUCTION = process.env.NODE_ENV === 'production'
module.exports = new Router()
  .match("/service-worker.js", ({ serviceWorker }) => {
    serviceWorker(".nuxt/dist/client/service-worker.js");
  })
  .get("/some-route/:slug", ({ cache }) => {
    cache({
      edge: {
        maxAgeSeconds: 60 * 60 * 24 * 365, // keep the incrementally generated page for a year
      },
      browser: false,
    })
    if (IF_PRODUCTION)
      serveStatic('dist/some-route/:slug.html', {
      // When the user requests a page that is not already statically rendered, fall back to SSR.
        onNotFound: () => renderWithApp(),
      })
    else renderWithApp()
  })
  .get('/api/some-route/:slug.json', ({ serveStatic, cache, renderWithApp }) => {
    cache({
      edge: {
        maxAgeSeconds: 60 * 60 * 24, // cache at the edge for 24 hours
      },
    })
    if (IF_PRODUCTION)
      serveStatic('dist/some-route/:slug.json', {
      // When the user requests a page that is not already statically rendered, fall back to SSR.
        onNotFound: () => renderWithApp(),
      })
    else renderWithApp()
  })
  .use(nuxtRoutes)
				
			

Testen und Bereitstellen

  • Um lokal zu testen, wie die App in der Produktion funktioniert, führen Sie Folgendes aus:
				
					layer0 build && layer0 run --production
				
			
Führen Sie zum Bereitstellen Folgendes aus:
				
					layer0 deploy
				
			
  • Feiern! 🎉

Beispiel: Inkrementelle statische Generierung mit Nuxt.js und Edgio

Mit Layer0 ist es einfacher denn je, die inkrementelle statische Generierung für verschiedene Zwecke mit unterschiedlichen Frameworks zu implementieren. Im Folgenden wird versucht, ISG mit Nuxt.js über Layer0 zu implementieren.