为了了解增量静态生成，请根据用户请求的页面在静态导出网站时未预渲染的情况来进行说明。 在这种情况下，将在加载数据时提供回退页。 此外，在使用获取的数据构建完页面后，该页面将被缓存到服务器上。 任何请求页面的用户都会跳过回退和加载阶段，并直接看到构建页面。 超级棒！
再生的灵感来自过时而重新验证的概念，即陈旧数据定期以”重新验证”秒的间隔刷新。 对于配置了staleWhileRevalidateSeconds值的页面，它们将在配置值的固定间隔后重新构建。
请参阅ISR的详细指南，网址为： 增量静态再生：其优点和缺陷 ，以及 增量静态再生完整指南(ISR) with Next.js。
在Nuxt.js中使用Layer0开始使用ISG (现在为Edgio)
本节将介绍如何使用Layer0和Nuxt.js实现ISG。 这些步骤包括使用layer0配置nuxt应用程序，创建动态页面和API路由，最后使用layer0配置查看ISG的运行情况。
使用Layer0配置Nuxt.js应用程序
使用以下命令创建Nuxt.js应用程序:
npm create nuxt-app layer0-nuxt-isg-example
- 对于选择自定义服务器框架，选择无
- 对于选择渲染模式，请选择通用(SSR)(注意:如果您已经有一个nuxt应用程序，只需保持上述配置，就可以开始了。
- 安装Layer0 CLI：
npm i -g @layer0/cli
- 在nuxt.config.js中 ，将@layer0/nuxt/module添加 到buildModules :
module.exports = {
...
buildModules: [['@layer0/nuxt/module', { layer0SourceMaps: true }]],
...
}
- 运行以下命令，将Nuxt 2与Layer0 (Edgio)无缝集成：
layer0 init
在Layer0上本地运行Nuxt.js应用程序
layer0 dev
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设置动态API路由
为了设置动态API路由,nuxt提供了一个服务器中间件，还可以扩展Express以允许创建REST端点。 例如，以下 server-middware/rest.js 将获取并返回所有以/api/some-route/开头并以.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美食
对于isg，请使用 routes.js (由layer0 init命令自动创建)并为动态页面/some-route/_slug.vue和动态API路由/api/some-route/:slug.json 添加 路由 ，如下所示：
// 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)
测试和部署
- 要在本地测试应用在生产中的运行方式，请运行以下命令:
layer0 build && layer0 run --production
要部署，请运行：
layer0 deploy
- 庆祝！ 🎉
示例：使用Nuxt.js和Edgio进行增量静态生成
使用Layer0，可以比以往更轻松地为不同的框架实现不同目的的增量静态生成。 以下内容旨在通过Layer0与Nuxt.js一起实施ISG
GitHub: https://github.com/rishi-raj-jain/static-medium-isr-in-nuxtjs-with-layer0 Website: Static Medium
