Nuxt ISR with Vercel
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 11.2k
- Forks
- 899
- Avg merge
- 2d 24m
- Merged PRs (30d)
- 40
Description
Environment
Vercel
"nuxt": "^3.15.4"
Reproduction
nuxt.config
prerender: {
routes: [
'/community/bilovodska-gromada/events',
'/community/bilovodska-gromada/events/centr-zhittyestiikosti-bilovodskoyi-tg-zaproshuye-ditok-molodshogo-shkilnogo-viku-z-mamami-do',
]
},
nitro: {
preset: "vercel",
vercel: {
config: {
bypassToken: process.env.VERCEL_BYPASS_TOKEN,
},
},
},
routeRules: {
'/community/**/events': { isr: true },
'/community/**/events/**': { isr: true }
}
_root/api/revalidate not /server/routes/api/revalidate
import {isValidSignature, SIGNATURE_HEADER_NAME} from '@sanity/webhook'
async function readBody(readable) {
const chunks = []
for await (const chunk of readable) {
chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk)
}
return Buffer.concat(chunks).toString('utf8')
}
export default async function (req, res) {
const body = await readBody(req)
const signature = req.headers[SIGNATURE_HEADER_NAME]
if (!(await isValidSignature(body, signature, secret))) {
res.status(401).json({success: false, message: 'Invalid signature'})
return
}
const {slug, ...} = JSON.parse(body)
const pathsToRevalidate = []
...
const results = await Promise.allSettled(
pathsToRevalidate.map(async (path) => {
try {
const response = await fetch(`https://${projectName}.vercel.app${path}`, {
method: 'GET',
headers: {
'x-prerender-revalidate': process.env.VERCEL_BYPASS_TOKEN,
},
})
const html = await response.text()
if (!response.ok) {
console.error(`Failed to revalidate path "${path}"`, html)
return {path, error: html}
}
console.log(`✅ Revalidated: ${path}`)
return {path, revalidated: true, snippet: html.slice(0, 100)}
} catch (err) {
console.error(`❌ Error during revalidation for path "${path}"`, err)
return {path, error: err.message}
}
})
)
return res.json({revalidated: pathsToRevalidate, results})
}
Describe the bug
Related to https://github.com/nitrojs/nitro/issues/889
The page is not revalidated on-demand.
I followed documentation to enable ISR https://nitro.build/deploy/providers/vercel#on-demand-incremental-static-regeneration-isr.
- Set VERCEL_BYPASS_TOKEN in Vercel env vars.
- Defined Nuxt config with enabled 'vercel' preset and set bypassToken.
- Changed data and hit Vercel serverless /api/revalidate, sent 'x-prerender-revalidate': process.env.VERCEL_BYPASS_TOKEN and received positive response 200 with old page.
- Visiting site always show old page. Vercel ISR logs shows 0 Read and Write usage.
What I expected to receive on reload is certain rebuild page with new data, but apparently Nitro does not exactly rebuild page so I don't really understand If i can do what I want to.
Additional context
No response
Logs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the nuxt.config ISR settings and the _root/api/revalidate handler, then compare their behavior with Nitro's Vercel ISR documentation and related issue #889. Trace the request using x-prerender-revalidate and verify that a changed page is regenerated and served with new data on Vercel.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nuxt
- Domain
- cloud
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100