#Nextui tabs

24 messages · Page 1 of 1 (latest)

rigid raptor
#

Hi there,
I am using nextui tabs and I must use the tabs within client component, but the issue is that I need some tab component as server component
async components to use react suspense with it, because if I used client component it i will not work with react suspense, so any suggession please?

image.png
tidal nightBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

thorny tangle
#

maybe you can go ask in the nextui discord server

covert creek
thorny tangle
#

was just a suggestion 🙂

covert creek
#

ok, but still don't needlessly push away people

rigid raptor
#

@thorny tangle ok, I think the main question isn't around nextui itself as it's around using server component within client component to make react suspense work

covert creek
#

anyways, to answer your question. you can pass server components as props to client components. that way you can wrap your tab contents in suspense and pass them to your TabsComponent

#

it works the same way as passing a server component as children to a server component.

<ClientComponent>
  <ServerComponent />
<ClientComponent />
rigid raptor
#

@covert creek thanks for your answer, but I think this way will not work as I am having multiple tabs content, as react/nextjs doesn't support named slots,

#

<ClientComponent> <ServerComponentTabA /> <ServerComponentTabB /> <ServerComponentTabC /> <ClientComponent />

covert creek
#

Give me a sec

rigid raptor
#

take your time

covert creek
#

For posterity (and the forum):

// page.tsx
import { Suspense } from "react";
import { TabA } from "~/components/tab-a";
import { TabB } from "~/components/tab-b";
import { Tabs } from "~/components/tabs";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Tabs
        tabs={[<SuspendedTabA key={"taba"} />, <SuspendedTabB key={"tabb"} />]}
      />
    </main>
  );
}

const SuspendedTabA = () => {
  return (
    <Suspense fallback={<p>Loading tab...</p>}>
      <TabA />
    </Suspense>
  );
};

const SuspendedTabB = () => {
  return (
    <Suspense fallback={<p>Loading tab...</p>}>
      <TabB />
    </Suspense>
  );
};

// tabs.tsx
"use client";

import { Tab } from "./tab";

export const Tabs = ({ tabs }: { tabs: React.ReactNode[] }) => {
  return (
    <div>
      <h1 className="text-xl">Tabsss!</h1>
      <div>
        {tabs.map((tab, index) => (
          <Tab key={index}>{tab}</Tab>
        ))}
      </div>
    </div>
  );
};

// tab.tsx
"use client";

export const Tab = ({ children }: { children: React.ReactNode }) => {
  return <div>{children}</div>;
};

// tab-a.tsx
"use client";

export const TabA = () => {
  return <div>Tab A</div>;
};
rigid raptor
#

@covert creek but this not gonna be ideal solution where the all tabs request gonna be called without event trigger specific tab

#

for example
TabA has request to endpoint api
TabB has request to endpoint api
TabC has request to endpoint api
all of above requests are goona be called at the same time

covert creek
#

Mh, not necessarily. You can conditionally render tabs based on the active tab state if nextui exposes that information.

rigid raptor
#

the request gonna be called outside of the tabs, while we're passing the server components they will be rendered

#

got my point?

covert creek
#

No, not really. Be more specific on where you think the problem is with the code above and why you think it will cause issues

rigid raptor
#

the tabs api gonna be called at this point

image.png
covert creek
#

If you fetch your data on server side everything is going to be fetched at the same time. But if you do it on client side with something like react-query, then the fetch call will happen when your tab is rendered.