Let’s say I’m building a chat-gpt-like component.

I have my RootLayout like this:

export default async function Layout({ children }) {

  const conversationsData = getUserConversation();
  const userData = getCurrentUser();
  const [conversations, user] = await Promise.all([conversationsData, userData]);

  return (
    <div className="flex h-screen">
      <div className="h-screen w-1/5 bg-[#F9FAFB] left-0 top-0 dark:bg-[#202123]  border-gray-100 dark:border-gray-800 shadow">
        <Dialog open={false}>

          <div className=" w-[90%] m-auto max-h-[76%] overflow-y-auto">
            <div className="text-[#5F5F5F] mt-4 dark:text-gray-400">
              Recent conversation
              <Separator />
            </div>
            <ConversationsNavList conversations={conversations}/>

            <div className="absolute bottom-4 w-[90%] flex justify-between items-center">
              <div className="flex justify-center items-center">
                <Avatar>
                  <Image src={"/philippe.png"} alt="This is your avatar" width={40} height={40} />
                  <AvatarFallback>...</AvatarFallback>
                </Avatar>
                <div className="ml-2 text-[#5F5F5F] dark:text-gray-300">
                  {" "}
                  {user?.username}
                </div>
              </div>
            </div>
          </div>
        </Dialog>
      </div>
      <div className="flex-grow overflow-auto pt-4 ml-[20%] dark:bg-[#343541]">{children}</div>
    </div>
  );
}

ConversationsNavList is a client component that use useSelectedLayoutSegment to know which conversation is selected.

My Home page has a submit button that use a server action that do the following:

1. Call a POST /conversation with the first message
2. It uses the generated conversation id from the response to redirect to /conversations/${id}

Everything works well, but the new generated conversation do not appear in the Layout. I suppose it’s because the layout isn’t re computed when moving to an other page of the same folder
Now I’m not sure if using RSC is the way to go, because:

• I cannot do optimistic update as the data is hold by a top-level server component
• I probably have to refetch the whole page to make this work…

It might be better to use react-query, no ?