Astro.js v5：同动态路由下混合静态渲染与按需SSR方案咨询

针对你的场景，核心问题是未正确配置fallback参数以及全局prerender模式的冲突，以下是具体实现步骤：

1. 调整Nuxt配置文件（nuxt.config.ts） #

保持输出模式为server，配置Vercel适配器的ISR基础参数，不要全局开启prerender: true：

export default defineNuxtConfig({
  output: 'server',
  adapter: vercel({
    isr: {
      expiration: 86400, // 全局默认缓存有效期（1天）
      bypassToken: process.env.VERCEL_ISR_BYPASS_TOKEN // 从环境变量获取刷新令牌
    }
  })
})

2. 文章页面组件配置（pages/articles/[slug].vue） #

在页面中通过getStaticPaths返回预渲染的2000个路径，同时设置fallback: 'blocking'，这是实现混合模式的关键：

<script setup>
// 配置当前页面的ISR规则
defineStaticConfig({
  isr: {
    revalidate: 3600, // 每小时自动刷新缓存
    bypassToken: process.env.VERCEL_ISR_BYPASS_TOKEN
  }
})

// 获取需要预渲染的2000篇文章slug
async function getStaticPaths() {
  // 替换为你实际获取预渲染slug的逻辑（比如从数据库/API拉取）
  const preRenderedSlugs = await fetch('/api/get-pre-rendered-slugs').then(res => res.json())
  
  return {
    paths: preRenderedSlugs.map(slug => ({ params: { slug } })),
    fallback: 'blocking' // 未预渲染的路径将触发SSR并缓存结果
  }
}

// 获取单篇文章数据
async function getStaticProps({ params }) {
  const article = await fetch(`/api/get-article/${params.slug}`).then(res => res.json())
  
  // 文章不存在时返回404
  if (!article) {
    return { notFound: true }
  }
  
  return { props: { article } }
}
</script>

<template>
  <div v-if="article" class="article-page">
    <h1>{{ article.title }}</h1>
    <div class="article-content" v-html="article.content"></div>
  </div>
</template>

3. 404页面缓存配置（pages/404.vue） #

给404页面也加上ISR配置，确保不存在的路径也能缓存结果：

<script setup>
defineStaticConfig({
  isr: {
    revalidate: 86400, // 404页面缓存1天
    bypassToken: process.env.VERCEL_ISR_BYPASS_TOKEN
  }
})
</script>

<template>
  <div class="not-found">
    <h1>404 - 文章不存在</h1>
    <p>你访问的文章路径无效，请检查链接或返回首页</p>
  </div>
</template>

关键说明 #

• fallback: 'blocking'：这个参数会让Vercel对未预渲染的路径做以下处理：第一次访问时执行SSR渲染，然后将结果缓存为静态文件，后续直接返回缓存内容；当缓存到期（按revalidate时间），会在后台重新渲染更新缓存。
• 避免全局prerender: true：全局开启预渲染会让Nuxt只处理getStaticPaths返回的路径，其余直接返回404，无法触发按需SSR。
• 强制刷新缓存：如果需要手动刷新某篇文章的缓存，可在URL后添加?bypass_token=你的令牌，比如/articles/xxx?bypass_token=xxx。

内容的提问来源于stack exchange，提问作者Vasil Kostadinov