Home Blogs Una guía para la Regeneración Estática Incremental
Applications

Una guía para la Regeneración Estática Incremental

About The Author

Outline

Para entender la generación estática incremental, deje que la explicación se guíe por un escenario en el que una página solicitada por el usuario no se preprocesó mientras exportaba estáticamente el sitio web. En tal caso, se sirve una página de respaldo mientras los datos se cargan. Además, al completar la construcción de la página con los datos obtenidos, la página se almacena en caché en el servidor. Cualquier usuario que solicite la página saltaría las etapas de descarga y carga, y vería directamente la página construida. ¡Excelente!

La regeneración se inspira en el concepto de revalidado obsoleto, donde los datos obsoletos se actualizan a intervalos regulares de segundos de revalidado. Para las páginas que tienen el valor staleWhileRevalidateSeconds configurado, se reconstruirían después de intervalos regulares del valor configurado.

Consulte las guías detalladas sobre ISR en: Regeneración estática incremental: Sus beneficios y sus defectos y Una guía completa para la regeneración estática incremental (ISR) con Next.js.

Empezando con ISG en Nuxt.js con Layer0 (ahora Edgio)

Esta sección describirá cómo implementar ISG con Layer0 y Nuxt.js. Los pasos incluyen la configuración de una aplicación nuxt con layer0, la creación de páginas dinámicas y rutas api, y finalmente el uso de configuraciones layer0 para ver ISG en acción.

Configuración de la aplicación Nuxt.js con Layer0

Cree una aplicación Nuxt.js con el siguiente comando:

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

				
			
  • Para Elegir marco de servidor personalizado, seleccione Ninguno
  • Para elegir el modo de renderizado, seleccione Universal (SSR)(Nota: En caso de que ya tenga una aplicación nuxt, simplemente mantenga las configuraciones anteriores, y sería bueno ir).
  • Instale el Layer0 CLI:
				
					npm i -g @layer0/cli
				
			
  • En nuxt.config.js, añada @layer0/nuxt/module a buildModules:
				
					module.exports = {
  ...
  buildModules: [['@layer0/nuxt/module', { layer0SourceMaps: true }]],
  ...
}
				
			
  • Ejecute lo siguiente para integrar Nuxt 2 sin problemas con Layer0 (Edgio):
				
					layer0 init
				
			

Ejecute la aplicación Nuxt.js localmente en Layer0

				
					layer0 dev
				
			

Creación de páginas dinámicas y rutas api

1. Configurar rutas de página dinámicas

Nuxt hace que sea muy fácil crear páginas dinámicas. Para configurar una ruta dinámica, cree un archivo _slug.vue en la carpeta some-route en el directorio de páginas de su aplicación.

Para obtener el parámetro dinámico slug, Nuxt proporciona un hook de obtención de datos asyncData que tiene acceso al objeto de contexto. Por ejemplo, en la siguiente página dinámica pages/some-route/_slug.vue , se puede obtener el slug a través de params.slug para realizar llamadas de búsqueda de datos antes de que la página se procese.

				
					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. Configurar rutas api dinámicas

Para configurar rutas api dinámicas, nuxt proporciona un servidor middleware que también puede extender Express, lo que permite la creación de puntos finales REST. Por ejemplo, el siguiente server-middleware/rest.js obtendrá y devolverá datos para todos los endpoints que comienzan con /api/some-route/ y terminan en .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

Para ISG, use routes.js (creado automáticamente por el comando layer0 init) y agregue ruta para las páginas dinámicas /some-route/_slug.vue y la ruta api dinámica /api/some-route/:slug.json como se muestra a continuación:

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

Pruebas y despliegue

  • Para probar localmente cómo la aplicación funcionaría en producción, ejecute lo siguiente:
				
					layer0 build && layer0 run --production
				
			
Para implementar, ejecute:
				
					layer0 deploy
				
			
  • ¡Celebra! 🎉

Ejemplo: Generación estática incremental con Nuxt.js y Edgio

Con Layer0, es más fácil que nunca implementar la Generación Estática Incremental para diferentes propósitos con diferentes marcos. Lo siguiente busca implementar ISG con Nuxt.js a través de Layer0.