Home Blogs 增量靜態再生指南
Applications

About The Author

Outline

爲了瞭解靜態增量生成,讓解釋以用戶請求的頁面在靜態導出網站時未預渲染的情景爲指導。 在這種情況下,載入數據時會提供回退頁面。 此外,使用獲取的數據構建頁面後,該頁面將被暫存到伺服器上。 任何請求該頁面的用戶都會跳過回退和載入階段,並直接查看構建頁面。 超級棒!

再生靈感源自於”在重新驗證時過時”的概念,在這種概念中,過時數據將以‘re驗證’秒的定期間隔刷新。 對於配置了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中,將@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目錄中的sof-route文件夾中創建文件_slug.vue。

爲了獲得動態參數slug,Nuxt提供了一個數據提取鉤子asyncData,它可以訪問上下文對象。 例如,在以下頁面/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-中間件/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命令自動創建)併爲動態頁面/som-route/_slug.vue和動態API路由/api/som-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實現ISG與Nuxt.js。