How would you guys set up the following behaviour in the app router. The sidebar has a link, each link points to a dynamic segment that renders in the middle. Now a new requirement: The sidebar should contain 3 tabs where each tab has different items in them. They should best case be rendered as a server component. How would you handle the data fetching? I dont wanna use searchParams since it would prevent back navigation in the browser, in this case since its just the sidebar it would disrupt the user flow if back button would go back in the tab.

"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { type PropsWithChildren } from "react";

const SidebarTabs = (props: PropsWithChildren) => {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      {props.children}
    </Tabs>
  );
};

const SidebarTabContent = (props: PropsWithChildren & { value: string }) => {
  return <TabsContent value={props.value}>{props.children}</TabsContent>;
};

export { SidebarTabs, SidebarTabContent };

And inside the layout rsc

        <SidebarTabs>
          <>
            <SidebarTabContent value="account">
              <SectionSidebarContent />
            </SidebarTabContent>
            <SidebarTabContent value="password">
              <SectionSidebarContent2 />
            </SidebarTabContent>
          </>
        </SidebarTabs>

Is this dumb? It works but do I break anything?
(SectionSidebarContent/SectionSidebarContent2 are also RSC)