Next.js新App Router中API定时重验证失效问题求助

你遇到的核心问题是：在Next.js App Router的客户端组件中，使用next.revalidate配置的定时重验证未生效，只能通过cache: 'no-store'强制每次请求，但影响性能。原因在于客户端侧发起的fetch请求，next.revalidate配置无法触发Next.js的服务器端增量静态再生（ISR）机制，该配置仅作用于服务器端渲染/生成阶段的请求，客户端请求默认受浏览器缓存规则约束。

以下是两种可行的解决方案：

方案1：改用服务器组件（推荐） #

App Router的服务器组件天然支持ISR，无需客户端状态管理，性能最优。

步骤1：将组件改为服务器组件 #

移除组件中的"use client"指令，直接在组件内获取数据：

// 服务器组件，无需加"use client"
import { fetchPageInfo } from "@/utils/fetchPageInfo";

export default async function PageInfoComponent() {
  const pageInfo = await fetchPageInfo();
  
  if (!pageInfo) {
    return <div>数据加载失败</div>;
  }

  return (
    <div>
      {/* 渲染你的pageInfo内容 */}
      <h1>{pageInfo.title}</h1>
    </div>
  );
}

步骤2：保留fetch函数的revalidate配置 #

// fetchPageInfo.ts
import { PageInfo } from "../typings";

export const fetchPageInfo = async () => {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/pageInfo`, {
      next: { revalidate: 10 }, // 每10秒触发服务器端重验证
    });

    if (!res.ok) {
      throw new Error(`请求失败: ${res.status}`);
    }

    const data = await res.json();
    return data.pageInfo as PageInfo;
  } catch (error) {
    console.error("数据获取错误:", error);
    return null;
  }
};

步骤3：优化API路由的缓存头 #

给API路由响应添加缓存头，确保Next.js可以正确缓存并触发重验证：

// app/api/pageInfo/route.ts
import { NextResponse } from "next/server";
import sanityClient from "@/sanity/client";
import groq from "groq";

export async function GET() {
  try {
    const query = groq`*[_type == "pageInfo"][0]`;
    const pageInfo = await sanityClient.fetch(query);

    return NextResponse.json({ pageInfo }, {
      headers: {
        // 允许CDN缓存10秒，缓存过期后仍可返回旧数据直到新数据生成
        "Cache-Control": `s-maxage=10, stale-while-revalidate`,
      },
    });
  } catch (error) {
    console.error('Sanity数据请求错误:', error);
    return NextResponse.json({ error: '服务器内部错误' }, { status: 500 });
  }
}

方案2：客户端组件结合SWR（适合需交互的场景） #

如果必须使用客户端组件（比如需要用户交互），可以用SWR库实现客户端侧的定时缓存刷新，性能优于cache: 'no-store'。

步骤1：安装SWR #

npm install swr

步骤2：用SWR封装数据请求 #

"use client"; // 明确标记为客户端组件
import useSWR from "swr";
import { PageInfo } from "../typings";

// 定义数据获取函数
const fetcher = async () => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/pageInfo`);
  if (!res.ok) throw new Error("数据请求失败");
  const data = await res.json();
  return data.pageInfo as PageInfo;
};

export default function PageInfoComponent() {
  const { data: pageInfo, error } = useSWR("/api/pageInfo", fetcher, {
    refreshInterval: 10000, // 每10秒自动刷新
    revalidateOnFocus: true, // 页面重新聚焦时刷新（可选）
  });

  if (error) return <div>数据加载失败</div>;
  if (!pageInfo) return <div>加载中...</div>;

  return (
    <div>
      <h1>{pageInfo.title}</h1>
    </div>
  );
}

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