如何阻止Next.js缓存与预取特定页面？电商购物车SSR缓存异常

针对你遇到的SSR模式下购物车页面软导航显示旧数据、设置cache-control: no-store仍无效的问题，可从以下几个维度解决：

1. 禁用页面预取 #

Next.js的<Link>组件默认会预取目标页面资源，这会导致软导航时直接使用预取的旧数据。给购物车页面的链接添加prefetch={false}：

// Pages Router
import Link from 'next/link';

<Link href="/cart" prefetch={false}>购物车</Link>

// App Router（Next.js 13+）
import Link from 'next/link';

<Link href="/cart" prefetch={false}>购物车</Link>

2. 配置严格的缓存策略 #

Pages Router 方案 #

在getServerSideProps中同时设置HTTP缓存头和确保数据无缓存：

export async function getServerSideProps(context) {
  // 覆盖所有缓存规则，强制每次请求重新获取
  context.res.setHeader(
    'Cache-Control',
    'no-store, no-cache, must-revalidate, proxy-revalidate'
  );
  context.res.setHeader('Pragma', 'no-cache');
  context.res.setHeader('Expires', '0');

  // 拉取最新购物车数据（替换为你的实际数据获取逻辑）
  const cartData = await fetchYourCartAPI(context.req);

  return { props: { cartData } };
}

App Router（Next.js 13+）方案 #

通过dynamic配置强制页面动态渲染，同时在fetch中设置无缓存：

// app/cart/page.tsx
export const dynamic = 'force-dynamic'; // 强制每次请求都在服务器端渲染

async function fetchCartData() {
  // 明确禁用缓存
  const res = await fetch('https://your-api-domain/cart', {
    cache: 'no-store',
    credentials: 'include' // 携带用户凭证，确保获取当前用户的购物车
  });
  if (!res.ok) throw new Error('Failed to fetch cart data');
  return res.json();
}

export default async function CartPage() {
  const cartData = await fetchCartData();
  return (
    <div>
      {/* 渲染购物车内容 */}
    </div>
  );
}

3. 客户端主动刷新数据 #

如果软导航后仍存在旧数据残留，可在页面组件中监听路由变化，主动拉取最新数据：

// Pages Router 客户端组件
'use client';

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function CartPage({ initialCartData }) {
  const [cartData, setCartData] = useState(initialCartData);
  const router = useRouter();

  useEffect(() => {
    const fetchLatestCart = async () => {
      const res = await fetch('/api/cart', { cache: 'no-store' });
      const data = await res.json();
      setCartData(data);
    };
    fetchLatestCart();
  }, [router.asPath]); // 路由变化时重新获取

  return <div>{/* 渲染购物车 */}</div>;
}

App Router 额外处理 #

在App Router中，若使用客户端组件操作购物车，可在操作完成后调用router.refresh()强制刷新页面数据：

'use client';

import { useRouter } from 'next/navigation';

export default function CartUpdateButton() {
  const router = useRouter();

  const handleUpdateCart = async () => {
    // 执行购物车更新逻辑
    await fetch('/api/cart/update', {
      method: 'POST',
      body: JSON.stringify({ /* 更新参数 */ })
    });
    // 强制刷新页面，获取最新数据
    router.refresh();
  };

  return <button onClick={handleUpdateCart}>更新购物车</button>;
}

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