Next.js页面缓存导致服务器数据不更新的技术求助

问题背景 #

在Next.js项目中，某页面首次渲染或刷新时数据显示正常，但通过Link跳转至其他页面后再返回（不刷新）时，页面展示的是旧数据。已尝试在fetch中配置cache: no-cache/next: {revalidate: 0}，以及页面级的export const dynamic = 'force-dynamic'、export const revalidate = 0，均未解决问题，目前仅能通过window.location.reload()强制刷新获取新数据。

解决方案 #

1. 转为客户端组件，在挂载时重新获取数据 #

服务器组件的数据在客户端路由跳转时会被缓存，将页面改为客户端组件，通过useEffect在组件挂载时触发数据请求，确保每次返回页面都拉取最新数据：

'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';

async function GetAboutTablesData() {
    try {
        const response = await fetch(`${API_URL}/admin/about`, {
            method: "GET",
            cache: "no-store",
        });
        if (response.ok) return response.json();
        return false;
    } catch (error) {
        console.error(error);
        return false;
    }
}

export default function AdminContentAbout() {
    const [aboutTablesData, setAboutTablesData] = useState<{ miscs: IMisc[]; contacts: IContact[]; socials: ISocial[]; } | false>(false);

    useEffect(() => {
        const fetchLatestData = async () => {
            const data = await GetAboutTablesData();
            setAboutTablesData(data);
        };
        fetchLatestData();
    }, []);

    return (
        <main className="admin-content-about">
            <section className="navigator">
                <div className="navigator-path">
                    <Link href="/admin" className="navigator-title-link">
                        <h2>Navigator</h2>
                    </Link>
                    <span className="navigator-char">&#62;</span>
                    <Link href="/admin/content" className="navigator-title-link">
                        <h2>Content</h2>
                    </Link>
                    <span className="navigator-char">&#62;</span>
                    <h1 className="navigator-title">About</h1>
                </div>
            </section>
            {aboutTablesData && (<Elementor originFormData={aboutTablesData} />)}
            {aboutTablesData === false && (<p>Server error</p>)}
        </main>
    );
}

2. 结合router.refresh()强制刷新服务器组件 #

若希望保留服务器组件逻辑，可在页面中添加客户端代码，监听路由变化并调用router.refresh()，强制服务器重新渲染页面并获取最新数据：

'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

async function GetAboutTablesData() {
    // 原有数据请求逻辑
}

export default async function AdminContentAbout() {
    const router = useRouter();

    useEffect(() => {
        // 每次组件挂载（路由跳转返回）时触发服务器刷新
        router.refresh();
    }, [router]);

    const aboutTablesData = await GetAboutTablesData();

    return (
        // 原有JSX结构
    );
}

3. 检查并修正后端API的缓存响应头 #

若后端API返回了允许缓存的Cache-Control头，会导致浏览器缓存请求结果。需确保后端返回的响应头包含：

Cache-Control: no-store, must-revalidate

这样浏览器会直接跳过本地缓存，每次请求都向服务器获取最新数据。

为什么之前的配置无效？ #

Next.js的App Router中，服务器组件的输出默认会在客户端路由跳转时被缓存。页面级的dynamic: 'force-dynamic'仅确保页面在服务器端每次请求都重新渲染，但客户端跳转时仍会复用已缓存的服务器组件结果，因此需要结合客户端触发逻辑来强制重新获取数据。

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