Para compreender a Geração Estática Incremental, deixe a explicação ser guiada por um cenário em que uma página solicitada pelo utilizador não foi pré-renderizada enquanto exportava o website de forma estática. Nesse caso, uma página de retorno é servida enquanto os dados são carregados. Além disso, após a conclusão de construir a página com os dados obtidos, a página é então armazenada em cache no servidor. Qualquer utilizador que pedisse a página, em seguida, saltaria sobre as fases de recuperação e carregamento, e veria diretamente a página construída. Excelente!
A regeneração é inspirada no conceito de obsoleta enquanto revalida, em que os dados obsoletos são atualizados a intervalos regulares de segundos de revalidação. Para páginas que têm o valor staleWhileRevalidateSeconds configurado, elas seriam reconstruídas após intervalos regulares do valor configurado.
Consulte os guias detalhados no ISR em: Regeneração estática incremental: Os seus benefícios e as 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 configurar um aplicativo de texto com leader0, criar rotas dinâmicas de página e api e, finalmente, usar configurações de leader0 para ver o ISG em ação.
Configurar a aplicação Nuxt.js com Layer0
Crie uma aplicação Nuxt.js com o 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: No caso de você já ter um aplicativo de texto, basta manter as configurações acima, e seria bom ir.)
- Instale a CLI do Layer0:
npm i -g @layer0/cli
- Em nuxt.config.js , adicione laier0/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. Configure rotas dinâmicas de página
Nuxt torna super fácil criar páginas dinâmicas. Para configurar uma rota dinâmica, crie um ficheiro _slug.vue na pasta de algumas rotas no diretório de páginas da aplicação.
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/algumas-rotas/_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. Configure 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 o ISG, use o comando routes.js (criado automaticamente pelo comando init leader0) e adicione a 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)
Testes e Implantação
- Para testar localmente como o aplicativo faria na produção, execute o seguinte:
layer0 build && layer0 run --production
layer0 deploy
- Celebre! 🎉
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 procura implementar o ISG com o Nuxt.js via Layer0.
GitHub: https://github.com/rishi-raj-jain/static-medium-isr-in-nuxtjs-with-layer0 Página web: Meio estático
