页面无刷新改地址后getStaticPaths/getStaticProps失效问题求助

问题根源 #

1. shallow: true 的路由行为限制
   使用shallow: true跳转路由时，Next.js仅更新浏览器地址栏，不会重新加载目标页面组件，也不会触发getStaticProps这类数据获取方法。首次访问页面时getStaticProps能运行是因为页面从服务器加载，但后续浅跳转复用了当前组件实例，完全跳过了数据获取逻辑。

2. getStaticPaths 配置不匹配需求
   你的getStaticPaths只预生成了category: "Search Category"这一个路径，且fallback: false意味着任何不在预生成列表里的路径（比如/s/game、/s/estate）都会直接返回404。你能通过路由跳转过去只是客户端路由未校验，但页面数据始终是首次加载的旧数据。

最优解决方法 #

根据业务场景选择对应方案：

方案1：保留静态生成（适合分类数量少、不常变化的场景）

• 更新getStaticPaths配置：
  把所有可能的分类加入预生成列表，或设置fallback: 'blocking'（首次访问未预生成路径时，服务器动态生成并缓存页面）。示例：

  export async function getStaticPaths() {
    // 从接口/本地文件获取全部分类列表
    const categories = ["game", "estate", "Search Category"];
    return {
      paths: categories.map(category => ({
        params: { category }
      })),
      fallback: 'blocking',
    };
  }
  

• 移除shallow: true：
  改用正常路由跳转，让Next.js重新加载页面组件并触发getStaticProps：

  router.push(address, undefined, { scroll: false })
  

方案2：客户端动态获取数据（适合分类数量多、动态变化的场景）

如果分类是动态生成或数量极多，静态生成不现实，直接在客户端监听路由变化获取数据：

• 删除getStaticPaths和getStaticProps，在组件中使用useRouter钩子：

  import { useRouter } from 'next/router';
  import { useEffect, useState } from 'react';
  
  export default function CategoryPage() {
    const router = useRouter();
    const [currentCategory, setCurrentCategory] = useState(null);
  
    useEffect(() => {
      if (router.isReady) {
        setCurrentCategory(router.query.category);
        // 这里可根据分类请求对应数据
      }
    }, [router.isReady, router.query.category]);
  
    if (!currentCategory) return <div>加载中...</div>;
  
    return <div>当前分类：{currentCategory}</div>;
  }
  

• 路由跳转可保留shallow: true（此时router.query会更新，触发useEffect重新获取数据）：

  router.push(address, null, { shallow: true, scroll: false })
  

内容的提问来源于stack exchange，提问作者m. saebi