💨
Nuxt3でのISR対応について調べた
Vercelのアップデート読んでたらNuxt is working on ISR supportと書いてあって何〜と思ったので調べてみた。
とりあえず作業ブランチあるかなと思って探してみたけどまだ公開されていなかった。
たぶんこうなるんだと思う
- Nuxt3のサーバーエンジン(Nitro)のプロファイル切り替えを利用して、ISR対応したいページを
vercel-edgeに指定してデプロイ - ページがVercel Edge Functionsで実行される
- On-Demand Incremental Static Regeneration に従いキャッシュが再生成される
なのでBuild Output API (v3)の仕様について見ていく。
Prerender Functions
Prerender FunctionsはEdgeで実行されるFunctionをキャッシュする仕組みで、invalidationのルールを<name>.prerender-config.json という関数ごとの設定に定義する。
expiration秒経過したら非同期にキャッシュが生成される(ISR)。falseにしたら毎回生成する。
bypassToken
キャッシュされてない結果を得るためのパラメータ
- 関数をビルドするごとにユニークなbypassTokenを発行し、設定にセットしてデプロイしておく
- リクエスト時に
x-prerender-revalidate: <bypassToken>をヘッダに渡してマッチさせる - キャッシュされてないレスポンスが返る
Nuxt on The Edge
NuxtのServer RoutesのハンドラをEdge FunctionsでSSRして x-vercel-ip-city を使ってアクセス元のLocationを画面に表示するデモ(ISRではない)。
NITRO_PRESET=vercel-edge nuxt build でビルドするとBuild Output APIに対応された出力になる。
❯ find .vercel
.vercel
.vercel/output
.vercel/output/config.json
.vercel/output/nitro.json
.vercel/output/static
.vercel/output/static/og-card.png
.vercel/output/static/_nuxt
.vercel/output/static/_nuxt/entry.f3987c78.css
.vercel/output/static/_nuxt/entry-af0cd99c.mjs
.vercel/output/static/_nuxt/manifest.json
.vercel/output/functions
.vercel/output/functions/index.func
.vercel/output/functions/index.func/index.mjs.map
.vercel/output/functions/index.func/index.mjs
.vercel/output/functions/index.func/.vc-config.json
❯ cat .vercel/output/functions/index.func/.vc-config.json
{
"runtime": "edge",
"entrypoint": "index.mjs"
}
インデックスページがEdge Functionになっているのが分かる。
ページごとのレンダーオプション
NextではページごとにSSGとかSSRとか選べるけどNuxtはどうなのという点。
Nuxt側のアップデートで対応されるかもしれないけど nitro.prerender.routes というnitro側のオプションを通してできるみたい。
Discussion