Home Blogs Guide de régénération statique incrémentielle
Applications

Guide de régénération statique incrémentielle

About The Author

Outline

Pour comprendre la génération statique incrémentielle, laissez l’explication être guidée par un scénario où une page demandée par l’utilisateur n’a pas été pré-rendue lors de l’exportation statique du site Web. Dans ce cas, une page de secours est servie pendant le chargement des données. En outre, une fois terminée la construction de la page avec les données extraites, la page est ensuite mise en antémémoire sur le serveur. Tout utilisateur demandant la page sauterait alors les étapes de repli et de chargement, et verrait directement la page construite. Superbe !

La régénération est inspirée du concept de périmé-while-revalidate, où les données périmées sont actualisées à intervalles réguliers de secondes de revalidation. Pour les pages pour lesquelles la valeur staleWhileRevalidateSeconds est configurée, elles seront reconstruites après des intervalles réguliers de la valeur configurée.

Reportez-vous aux guides détaillés sur ISR à : régénération statique incrémentale : ses avantages et ses défauts et Un guide complet pour la régénération statique incrémentale (ISR) avec Next.js.

Démarrer avec ISG dans Nuxt.js avec Layer0 (maintenant Edgio)

Cette section décrit comment implémenter ISG avec Layer0 et Nuxt.js. Les étapes comprennent la configuration d’une application nuxt avec layer0, la création de routes de pages et d’api dynamiques, et enfin l’utilisation de configurations layer0 pour voir ISG en action.

Configurer l’application Nuxt.js avec Layer0

Créez une application Nuxt.js à l’aide de la commande suivante :

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

				
			
  • Pour choisir une infrastructure de serveur personnalisée, sélectionnez aucun
  • Pour choisir le mode de rendu, sélectionnez Universal (SSR) (Remarque : dans le cas où vous avez déjà une application nuxt, il suffit de maintenir les configurations ci-dessus, et ce serait bon d’aller.)
  • Installez la CLI Layer0 :
				
					npm i -g @layer0/cli
				
			
  • Dans nuxt.config.js, ajoutez @layer0/nuxt/module à buildModules:
				
					module.exports = {
  ...
  buildModules: [['@layer0/nuxt/module', { layer0SourceMaps: true }]],
  ...
}
				
			
  • Exécutez la procédure suivante pour intégrer Nuxt 2 avec Layer0 (Edgio) de manière transparente :
				
					layer0 init
				
			

Exécutez l’application Nuxt.js localement sur Layer0

				
					layer0 dev
				
			

Création de routes de pages et d’api dynamiques

1. Configurez des itinéraires de page dynamiques

Nuxt rend super facile la création de pages dynamiques. Pour configurer une route dynamique, créez un fichier _slug.vue dans le dossier some-route dans le répertoire pages de votre application.

Pour obtenir le paramètre dynamique slug, Nuxt fournit un hook d’extraction de données asyncData qui a accès à l’objet de contexte. Par exemple, dans la page dynamique pages/some-route/_slug.vue suivante , on peut obtenir le slug via params.slug pour effectuer des appels de récupération de données avant que la page ne soit rendue.

				
					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. Configurez des routes api dynamiques

Pour mettre en place des routes api dynamiques, nuxt fournit un middleware serveur qui peut également étendre Express qui permet la création de points de terminaison REST. Par exemple, Server-middleware/REST.js va récupérer et retourner les données de tous les noeuds finaux commençant par /api/some-route/ et se terminant par .json.

				
					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 Goodies

Pour ISG, utilisez routes.js (créé automatiquement par la commande layer0 init) et ajoutez route pour les pages dynamiques /some-route/_slug.vue et la route api dynamique /api/some-route/:slug.json comme ci-dessous :

				
					// 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)
				
			

Test et déploiement

  • Pour tester localement le fonctionnement de l’application en production, exécutez la commande suivante :
				
					layer0 build && layer0 run --production
				
			
Pour déployer, exécutez :
				
					layer0 deploy
				
			
  • Célébrez ! 🎉

Exemple : génération statique incrémentielle avec Nuxt.js et Edgio

Avec Layer0, il est plus facile que jamais d’implémenter la génération statique incrémentielle à des fins différentes avec différents frameworks. Ce qui suit cherche à implémenter ISG avec Nuxt.js via Layer0.