Top Trends in Cybersecurity for 2024 | 
Incremental Static Generationを理解するために、ユーザーが要求したページが静的にウェブサイトをエクスポートしている間に事前レンダリングされなかったシナリオで説明を導く。 このような場合、データのロード中にフォールバックページが提供される。 さらに、フェッチされたデータでページを構築すると、ページはサーバーにキャッシュされる。 そのページを要求したユーザーはフォールバックとロードの段階をスキップし、ビルドされたページを直接見ることになる。 素晴らしい！
再生成はstale-while-revalidateの概念に触発されており、古いデータは「再検証」秒の定期的な間隔で更新される。 staleWhileRevalidateSeconds値が設定されているページの場合、設定された値の一定間隔の後に再構築される。
ISRの詳細なガイドを参照するには、次のURLを参照してください。Incremental Static Regeneration: Its Benefits and its Flaws and A Complete Guide to Incremental Static Regeneration (ISR) with Next.js
Layer0を使用したNuxt.jsでISGを使用する前に（現在はEdgio）
この節では、Layer0とNuxt.jsでISGを実装する方法を説明する。 手順には、nuxtアプリをlayer0で構成し、動的ページとAPIルートを作成し、最後にlayer0構成を使用してISGの動作を確認することが含まれる。
Layer0を使用したNuxt.jsアプリケーションの設定
次のコマンドでNuxt.jsアプリを作成する。
npm create nuxt-app layer0-nuxt-isg-example
- [カスタムサーバーフレームワークの選択]で[なし]を選択する
- レンダリングモードを選択するにはUniversal (SSR)を選択する(注:すでにnuxtアプリを持っている場合は、上記の設定を維持するだけで良い。
- Layer0 CLIをインストールする。
npm i -g @layer0/cli
- nuxt.config.jsで、 buildModulesに@layer0/nuxt/moduleを追加する。
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フォルダにfile_slug.vueを作成する。
動的パラメータslugを取得するために、Nuxtはコンテキストオブジェクトへのアクセスを持つasyncDataデータフェッチフックを提供する。 例えば、次の動的ページ/some-route/_slug.vueでは、ページがレンダリングされる前にデータフェッチコールを行うためにparams.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はRESTエンドポイントの作成を可能にするExpressを拡張できるサーバミドルウェアを提供する。 例えば、次の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 Goodies
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
