为了解增量静态生成，请根据静态导出网站时用户请求的页面未预呈现的情景来指导解释。 在这种情况下，将在加载数据时提供回退页。 此外，在使用提取的数据构建页面后，页面将缓存到服务器上。 然后请求页面的任何用户都将跳过回退和加载阶段，直接查看构建页面。 超级棒！
再生的灵感来自于陈旧的同时重新验证的概念，其中陈旧的数据将以‘re验证’秒的间隔定期刷新。 对于配置了staleWhileRevalidateSeconds值的页面，将在配置值的定期间隔后重新生成这些页面。
有关ISR的详细指南，请参阅：增量静态再生：其优点及其缺陷，以及带有Next.js的增量静态再生(ISR)完整指南。
Nuxt.js中的ISG使用Layer0 (现为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
创建动态页面和API路由
1.设置动态页面路由
Nuxt使创建动态页面变得超级简单。 要设置动态路由,请在应用的Pages目录中的Some-route文件夹中创建_slug.vue文件。
为了获得动态参数slug，Nuxt提供了一个数据提取钩子asyncData，该钩子可以访问上下文对象。 例如,在下面的pages/some-route/_slug.vue动态页面中,可以通过params.slug获取slug ,以便在页面呈现之前进行数据提取调用。
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-middleware/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 route /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
