For a complete minimal reproducible repository, visit this link.
This application is a chat app that features the following routes:
- /chat
- layout.tsx - server component containing the
Sidebarwhich is also a server component
- layout.tsx - server component containing the
- /chat/[id] - client component
Despite trying all of the commands listed below, I have been unable to update the sidebar when changing data in my Input component:
router.refresh();
router.push("/chat/" + chatId);
Even after implementing a route specifically designed to invalidate the cache on the server side with the function call
revalidatePath("/chat", "layout")Interestingly, although my Sidebar server component indicates that it updates, the UI itself does not reflect these changes.
Below are excerpts of key code snippets, while the full reproducible code can be found in the provided repository.
// ./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
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>
);
}