Per comprendere la generazione statica incrementale, lasciare che la spiegazione sia guidata da uno scenario in cui una pagina richiesta dall’utente non è stata pre-rappresentata durante l’esportazione statica del sito Web. In tal caso, durante il caricamento dei dati viene fornita una pagina di fallback. Inoltre, al termine della creazione della pagina con i dati recuperati, la pagina viene memorizzata nella cache del server. Qualsiasi utente che richieda la pagina salterebbe le fasi di fallback e caricamento e visualizzerebbe direttamente la pagina creata. Superbo!
La rigenerazione si ispira al concetto di riconvalida obsoleta, in cui i dati obsoleti vengono aggiornati a intervalli regolari di secondi di «riconvalida». Per le pagine che hanno staleWhileRevalidateSeconds configurato il valore, queste vengono ricostruite dopo intervalli regolari del valore configurato.
Fare riferimento alle guide dettagliate sull’ISR all’indirizzo: Rigenerazione statica incrementale: I suoi vantaggi e i suoi difetti e Una guida completa alla rigenerazione statica incrementale (ISR) con Next.js.
Guida introduttiva a ISG in Nuxt.js con Layer0 (ora Edgio)
Questa sezione descrive come implementare ISG con Layer0 e Nuxt.js. I passaggi includono la configurazione di un’app nuxt con layer0, la creazione di percorsi dinamici di pagine e api e infine l’utilizzo di configurazioni layer0 per vedere ISG in azione.
Configurazione dell’app Nuxt.js con Layer0
Creare un’app Nuxt.js con il seguente comando:
npm create nuxt-app layer0-nuxt-isg-example
- Per scegliere il framework server personalizzato, selezionare nessuno
- Per scegliere la modalità di rendering, selezionare universale (SSR) (Nota: Se si dispone già di un’app nuxt, è sufficiente mantenere le configurazioni sopra indicate e sarebbe opportuno procedere).
- Installare la CLI di livello 0:
npm i -g @layer0/cli
- In nuxt.config.js, aggiungere @layer0/nuxt/module a buildModules:
module.exports = {
...
buildModules: [['@layer0/nuxt/module', { layer0SourceMaps: true }]],
...
}
- Eseguire quanto segue per integrare perfettamente Nuxt 2 con Layer0 (Edgio):
layer0 init
Eseguire l’app Nuxt.js localmente su Layer0
layer0 dev
Creazione di percorsi di pagine dinamiche e api
1. Impostare percorsi pagina dinamici
Nuxt semplifica notevolmente la creazione di pagine dinamiche . Per impostare un percorso dinamico, creare un file _slug.vue in una cartella di instradamento nella directory Pages dell’applicazione.
Per ottenere lo slug del parametro dinamico, Nuxt fornisce un hook asyncData di recupero dati che ha accesso all’oggetto contesto. Ad esempio, nella pagina dinamica pagine seguenti/some-Route/_slug.vue, è possibile ottenere lo slug tramite params.slug per effettuare chiamate di recupero dati prima che la pagina venga visualizzata.
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. Impostare percorsi api dinamici
Per impostare percorsi api dinamici, nuxt fornisce un server middleware che può anche estendere Express, consentendo la creazione di endpoint REST. Ad esempio, i seguenti server-middleware/REST.js recupereranno e restituiranno i dati per tutti gli endpoint che iniziano con /api/some-Route/ e terminano in .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 chicche
Per ISG, utilizzare Routes.js (creato automaticamente dal comando init layer0) e aggiungere Route per le pagine dinamiche /some-Route/_slug.vue e il percorso api dinamico /api/some-Route/:slug.json come segue:
// 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 e implementazione
- Per verificare localmente il funzionamento dell’app in produzione, eseguire quanto segue:
layer0 build && layer0 run --production
layer0 deploy
- Festeggia! 🎉
Esempio: Generazione statica incrementale con Nuxt.js ed Edgio
Con Layer0, è più facile che mai implementare la generazione statica incrementale per scopi diversi con diversi framework. Di seguito viene indicato il tentativo di implementare ISG con Nuxt.js tramite Layer0.
GitHub: https://github.com/rishi-raj-jain/static-medium-isr-in-nuxtjs-with-layer0 sito Web: Supporto statico
