Next.js/Vercel动态页面生成缓慢，fallback页面未及时显示求助

我使用Next.js开发项目，部署在Vercel平台，后端采用无头WordPress提供数据。由于页面数量较多，构建阶段仅预生成分页的前三页。但点击指向未预生成页面的链接时，运行时动态构建流程耗时极久，设置的Fallback页面无法立即展示，请求排查性能瓶颈。

代码示例 #

export async function getStaticPaths() {
    const paths = await getPostsPaths(); // 生成分页的前三页路径

    return {
        paths,
        fallback: true
    }
}

export async function getStaticProps(props) {
    const globalData = await getGlobalData();

    const posttype = props.params.posttype;
    const slug = props.params.slug;

    const id = await getPostsId(`/${posttype}/${slug}/`); // 获取文章ID
    if (!id) {
        return {
            notFound: true
        }
    }

    const post = await getPostsSingle(id);

    return {
        props: {
            globalData,
            post
        },
        revalidate: 300
    }
}

export default function Page(props) {
    const router = useRouter();
    
    if (router.isFallback) {
        return (
            <>Loading...</> // 本应立即展示
        )
    }

    return (
        // 页面内容渲染
    )
}

排查方向 #

• WordPress API请求优化
  • 检查getGlobalData、getPostsId、getPostsSingle是否存在重复请求、未缓存的情况。比如每次执行getStaticProps都重新拉取全局数据，可考虑在构建阶段缓存全局数据，或在客户端用SWR/React Query做缓存。
  • 排查WordPress REST API的响应速度，是否存在未优化的数据库查询（比如缺少索引），可在WordPress端用插件缓存API响应、优化数据库性能。
• getStaticProps逻辑优化
  • 当前通过getPostsId根据路径查询ID，可尝试直接从分页路径解析页码（比如从/werkstoffe/seite/4/提取页码4），直接请求对应分页的文章列表，省去额外的API请求步骤。
  • 将串行请求改为并行：目前getGlobalData与后续的ID查询、文章查询是串行执行的，可改用Promise.all并行处理，缩短总耗时。
• Fallback展示逻辑校验
  • 明确router.isFallback的触发场景：当fallback: true时，客户端导航应该立即展示Fallback组件，但直接访问未预生成的URL时，会先在服务端完成构建，此时客户端会等待服务端返回，Fallback不会在客户端显示。需确认问题出现时是客户端导航还是直接访问URL的场景。
  • 可在客户端导航时，结合router.isLoading状态辅助展示loading，或在链接点击时立即触发loading状态，再等待页面构建完成。
• Vercel部署配置优化
  • 确认Vercel的构建缓存已启用，可缓存WordPress API的响应结果，减少重复请求。
  • 调整ISR配置：比如优化revalidate时间，或通过Vercel API触发后台预生成未构建的页面，减少用户触发动态构建的等待时间。

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