Next.js 13.4使用no-store缓存后页面仍无法刷新数据

针对你遇到的编辑书籍后跳转首页仍显示旧数据的问题，可通过以下几种方式解决：

1. 强制首页动态渲染 #

在首页的page.tsx文件顶部添加页面级的动态渲染配置，确保每次请求首页时都重新执行数据获取逻辑：

export const dynamic = 'force-dynamic';

App Router默认会对页面做静态优化，即使fetch设置了cache: 'no-store'，页面本身的缓存策略仍可能保留旧数据。该配置会强制页面以动态服务端渲染模式运行，每次请求都重新拉取最新数据。

2. 客户端组件中监听路由变化刷新数据 #

如果首页是客户端组件（已添加'use client'指令），可以通过监听路由跳转事件，在回到首页时主动重新获取数据：

'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { getBooks } from '@/utils/api';

export default function Home() {
  const [books, setBooks] = useState([]);
  const router = useRouter();

  const fetchLatestBooks = async () => {
    try {
      const data = await getBooks();
      setBooks(data);
    } catch (err) {
      console.error('获取书籍数据失败:', err);
    }
  };

  useEffect(() => {
    // 初始加载数据
    fetchLatestBooks();

    // 监听路由跳转完成事件，重新获取数据
    const unsubscribe = router.events.on('routeChangeComplete', fetchLatestBooks);
    
    return () => unsubscribe();
  }, [router]);

  // 渲染书籍列表
  return <div>{/* 你的书籍列表渲染逻辑 */}</div>;
}

3. 跳转时强制验证数据 #

在编辑页的跳转逻辑中，使用router.replace的revalidate选项，强制Next.js跳转后重新验证页面数据：

'use client';

import { useRouter } from 'next/navigation';

// 编辑成功后的跳转代码
const handleSaveSuccess = () => {
  router.replace('/', { revalidate: 0 });
};

revalidate: 0会告诉Next.js忽略缓存，重新获取页面的最新数据。

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