Home Blogs Um guia para a regeneração estática incremental
Applications

Um guia para a regeneração estática incremental

About The Author

Outline

Para entender a Geração Estática Incremental, deixe a explicação ser guiada por um cenário em que uma página solicitada pelo usuário não foi pré-renderizada enquanto exportava estaticamente o site. Nesse caso, uma página de retorno é servida enquanto os dados são carregados. Além disso, após a conclusão da construção da página com os dados obtidos, a página é então armazenada em cache no servidor. Qualquer usuário que solicite a página, então, pularia sobre as fases de recuperação e carregamento e verá diretamente a página construída. Excelente!

A regeneração é inspirada no conceito de obsoleta enquanto revalida, onde os dados obsoletos são atualizados em intervalos regulares de segundos de “revalidação”. Para páginas que têm o valor staleWhileRevalidateSeconds configurado, eles seriam reconstruídos após intervalos regulares do valor configurado.

Consulte os guias detalhados sobre ISR em: Regeneração estática incremental: Seus benefícios e suas falhas e Um guia completo para regeneração estática incremental (ISR) com Next.js.

Introdução ao ISG em Nuxt.js com Layer0 (agora Edgio)

Esta seção descreverá como implementar ISG com Layer0 e Nuxt.js. As etapas incluem a configuração de um aplicativo de texto com layer0, a criação de rotas dinâmicas de página e api e, finalmente, o uso de configurações layer0 para ver o ISG em ação.

Configurando o aplicativo Nuxt.js com Layer0

Crie um aplicativo Nuxt.js pelo seguinte comando:

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

				
			
  • Para Escolher estrutura de servidor personalizada, selecione Nenhum
  • Para escolher o modo de renderização, selecione Universal (SSR) (Nota: Caso você já tenha um aplicativo de texto, basta manter as configurações acima, e seria bom para ir.)
  • Instale a CLI Layer0:
				
					npm i -g @layer0/cli
				
			
  • Em nuxt.config.js , adicione layer0/nuxt/module ao buildModules:
				
					module.exports = {
  ...
  buildModules: [['@layer0/nuxt/module', { layer0SourceMaps: true }]],
  ...
}
				
			
  • Execute o seguinte para integrar perfeitamente o Nuxt 2 com Layer0 (Edgio):
				
					layer0 init
				
			

Execute o aplicativo Nuxt.js localmente no Layer0

				
					layer0 dev
				
			

Criando rotas dinâmicas de página e API

1. Configurar rotas de página dinâmicas

Nuxt torna super fácil criar páginas dinâmicas. Para configurar uma rota dinâmica, crie um arquivo _slug.vue na pasta de algumas rotas no diretório Pages do aplicativo.

Para obter o parâmetro dinâmico slug, Nuxt fornece um gancho de busca de dados asyncData que tem acesso ao objeto de contexto. Por exemplo, nas páginas seguintes /some-route/_slug.vue página dinâmica, pode-se obter o slug via params.slug para fazer chamadas de busca de dados antes que a página seja renderizada.

				
					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 rotas dinâmicas da api

Para configurar rotas dinâmicas de api, o Nuxt fornece um middleware de servidor também pode estender o Express, que permite a criação de endpoints REST. Por exemplo, o seguinte server-middleware/rest.js irá buscar e retornar dados para todos os endpoints que começam com /api/some-route/ e terminam em .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 (criado automaticamente pelo comando init layer0) e adicione rota para as páginas dinâmicas /some-route/_slug.vue e a rota dinâmica da api /api/some-route/:slug.json como abaixo:

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

Teste e implantação

  • Para testar localmente como o aplicativo faria em produção, execute o seguinte:
				
					layer0 build && layer0 run --production
				
			
Para implantar, execute:
				
					layer0 deploy
				
			
  • Celebra! 🎉

Exemplo: Geração estática incremental com Nuxt.js e Edgio

Com o Layer0, é mais fácil do que nunca implementar a Geração Estática Incremental para diferentes propósitos com diferentes frameworks. O seguinte busca implementar ISG com Nuxt.js via Layer0.