GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
증분 정적 생성을 이해하려면 사용자가 요청한 페이지가 웹 사이트를 정적으로 내보내는 동안 미리 렌더링되지 않은 시나리오를 통해 설명을 안내합니다. 이러한 경우 데이터가 로드되는 동안 대체 페이지가 제공됩니다. 또한 가져온 데이터로 페이지를 빌드하면 페이지가 서버에 캐시됩니다. 그런 다음 페이지를 요청하는 모든 사용자는 대체 및 로딩 단계를 건너뛰고 빌드된 페이지를 직접 볼 수 있습니다. 훌륭합니다!
재생은 부실 데이터가 ‘재검증’ 초의 일정한 간격으로 새로 고쳐지는 동안 부실 재검증의 개념에서 영감을 얻습니다. staleWhileRevalidateSeconds 값이 구성된 페이지의 경우 구성된 값의 일정한 간격이 지난 후에 다시 작성됩니다.
ISR에 대한 자세한 설명서인 증분 정적 재생: 그 이점과 결함 및 Next.js를 사용한 증분 정적 재생(ISR)에 대한 전체 가이드를 참조하십시오.
Layer0으로 Nuxt.js에서 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 에서 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 폴더에 _slug.vue 파일을 생성합니다.
동적 매개 변수 슬러그를 얻기 위해 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 상품
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 웹사이트: Static Medium
