NextJS 13：聊天应用中Sidebar服务端组件缓存失效问题

应用路由结构 #

• /chat
  • layout.tsx：承载Sidebar（服务端组件）的服务端组件
• /chat/[id]：客户端组件

问题现象 #

在Input组件提交数据更新后，执行以下操作仍无法让Sidebar更新：

router.refresh();
router.push("/chat/" + chatId);

即使在服务端通过路由调用revalidatePath("/chat", "layout")使缓存失效，Sidebar依旧没有同步更新。
奇怪的是，Sidebar服务端组件的日志显示数据已更新，但UI未同步。

关键代码片段 #

./app/chat/layout.tsx #

import React from 'react'
import { Sidebar } from "./_sidebar"

export default async function Layout({children}: {children: React.ReactNode}) {
  return (
    <div className="relative w-screen min-h-screen flex justify-start">
      <Sidebar />
      {children}
    </div>
  )
}

./app/chat/_sidebar.tsx #

import { getChats } from "@/actions";
import Link from "next/link";

export async function Sidebar() {
  const chats = await getChats();
  console.log("Sidebar.chats.latest", chats.at(-1))

  return (
    <div className="flex flex-col h-full px-6 min-h-screen">
      <h2 className="font-bold underline">Sidebar</h2>
        <Link href="/chat">New Chat</Link>
        {chats.map((chat, index) => (
          <p className="whitespace-nowrap" key={index}>{chat.message.slice(0,20)}</p>
         ))}
    </div>
  );
}

./app/chat/_input.tsx #

"use client";
import { nanoid } from "nanoid";
import { useRouter } from "next/navigation";
import React from "react";

export function Input() {
  const router = useRouter();
  const inputRef = React.useRef<any>();

  return (
    <div className="absolute bottom-1/2 flex flex-col h-28">
      <div className="flex flex-col space-y-8">
        <label className="text-white">Input Field Below:</label>
        <textarea ref={inputRef} className="text-black w-96 h-48" />
        <button
          className="bg-green-900 px-6 py-3"
          onClick={async () => {
            const value = inputRef?.current.value;
            const chatId = nanoid();
            await fetch("/api/chats/update", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({ id: chatId, message: value }),
            }).then(res => res.json());

            await fetch(`/api/revalidate?path=/chat&type=layout`, {cache: "no-store"});
            router.refresh();
            router.push("/chat/" + chatId);
         }}
        >
          Submit
        </button>
      </div>
    </div>
  );
}

问题分析与解决方案 #

核心原因 #

1. 路由操作顺序冲突：router.refresh()未完成就执行router.push()，新页面加载时仍使用旧缓存的布局。
2. 数据缓存未彻底禁用：getChats默认使用缓存策略，导致服务端未获取到最新数据。
3. 列表key不唯一：使用index作为列表项key，React无法正确识别新添加的聊天项，导致UI不更新。

具体解决步骤 #

1. 调整客户端路由操作顺序

将router.push()放在router.refresh()之后，添加短暂延迟确保刷新完成：

// 修改_input.tsx中的点击事件
onClick={async () => {
  const value = inputRef?.current.value;
  const chatId = nanoid();
  // 提交数据
  await fetch("/api/chats/update", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ id: chatId, message: value }),
  });

  // 触发缓存失效与页面刷新
  await fetch(`/api/revalidate?path=/chat&type=layout`, {cache: "no-store"});
  router.refresh();
  
  // 延迟跳转，确保刷新完成
  setTimeout(() => {
    router.push(`/chat/${chatId}`);
  }, 150);
}}

2. 禁用getChats的缓存

在getChats中显式设置cache: "no-store"，确保每次请求都获取最新数据：

// @/actions.ts中的getChats实现
export async function getChats() {
  const res = await fetch("/api/chats", {
    cache: "no-store", // 禁用缓存
  });
  if (!res.ok) throw new Error("Failed to fetch chats");
  return res.json();
}

3. 使用唯一key标识列表项

将Sidebar中列表项的key从index改为chat.id，确保React能正确更新列表：

// 修改_sidebar.tsx中的map部分
{chats.map((chat) => (
  <p className="whitespace-nowrap" key={chat.id}>{chat.message.slice(0,20)}</p>
))}

4. 确认服务端revalidate逻辑正确

确保服务端的revalidate路由正确调用revalidatePath：

// ./app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const path = searchParams.get('path');
  
  if (!path) {
    return NextResponse.json({ success: false, message: "Path is required" }, { status: 400 });
  }

  revalidatePath(path, "layout");
  return NextResponse.json({ success: true, message: "Layout revalidated" });
}

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