Next.js生产环境数据不刷新问题求助（Vercel+Prisma+PlanetScale）

不用Redux，问题核心是Next.js App Router的客户端导航缓存机制——当用Link组件跳转时，页面会复用服务端渲染的初始缓存数据，而非重新拉取最新数据。以下是几种直接有效的解决方法：

方法1：数据更新时主动失效页面缓存（推荐） #

在新增/修改数据的API路由中，调用revalidatePath方法，手动失效目标页面的缓存。这样不管是刷新页面还是客户端导航，都会获取最新数据。

示例代码（新增数据的API路由app/api/fighters/route.js）：

import { revalidatePath } from 'next/cache';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function POST(request) {
  // 处理新增fighter的业务逻辑
  const newFighter = await prisma.fighter.create({
    data: await request.json()
  });
  
  // 失效/users页面的缓存（替换成你的实际页面路径）
  revalidatePath('/users');
  
  return Response.json(newFighter);
}

方法2：客户端组件中主动拉取数据 #

将页面标记为客户端组件，通过useEffect结合数据查询逻辑在客户端拉取数据，绕过服务端缓存。

示例代码：

'use client'; // 必须标记为客户端组件
import { useState, useEffect } from 'react';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

async function getFighters() {
  return await prisma.fighter.findMany({
    where: {
      fightBlue: null,
      fightRed: null
    }
  });
}

function UsersPage() {
  const [fighters, setFighters] = useState([]);

  useEffect(() => {
    // 页面加载/路由切换时拉取最新数据
    getFighters().then(data => setFighters(data));
  }, []);

  return (
    // 你的页面渲染逻辑
  );
}

export default UsersPage;

方法3：结合dynamic='force-dynamic'与路由监听 #

如果已经使用了dynamic='force-dynamic'，可以监听路由变化事件，在客户端导航完成后重新拉取数据。

示例代码：

'use client';
import { useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

async function getFighters() {
  return await prisma.fighter.findMany({
    where: {
      fightBlue: null,
      fightRed: null
    }
  });
}

function UsersPage() {
  const [fighters, setFighters] = useState([]);
  const router = useRouter();

  const loadData = async () => {
    const data = await getFighters();
    setFighters(data);
  };

  useEffect(() => {
    loadData();
    // 监听路由切换完成事件，重新加载数据
    router.events.on('routeChangeComplete', loadData);
    
    // 组件卸载时移除监听
    return () => router.events.off('routeChangeComplete', loadData);
  }, [router]);

  return (
    // 你的页面渲染逻辑
  );
}

export const dynamic = 'force-dynamic';
export default UsersPage;

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