Data fetching when using MUI
Unanswered
Asian paper wasp posted this in #help-forum
Asian paper waspOP
Or any other UI libraries that do not work with React server component yet.
Obviously, server-side data fetching doesn't work too well since most of the components will be client components. I wonder how you guys typically do it right now.
Obviously, server-side data fetching doesn't work too well since most of the components will be client components. I wonder how you guys typically do it right now.
4 Replies
@Asian paper wasp Or any other UI libraries that do not work with React server component yet.
Obviously, server-side data fetching doesn't work too well since most of the components will be client components. I wonder how you guys typically do it right now.
export default async function Page() {
const data = await getData();
return <PageClient data={data} />;
}
"use client";
export default function PageClient({ data }) {
return <div>{data}</div>;
}@joulev ts
export default async function Page() {
const data = await getData();
return <PageClient data={data} />;
}
"use client";
export default function PageClient({ data }) {
return <div>{data}</div>;
}
Asian paper waspOP
But what about at the component level? Will that become a mess?
@Asian paper wasp But what about at the component level? Will that become a mess?
the code snippet i gave you above is equivalent to
from the pages router. If you could manage it in the pages router you can very well manage it in the app router
export async function getStaticProps() {
const data = await getData();
return { props: { data } };
}
export default function Page({ data }) {
return <div>{data}</div>;
}from the pages router. If you could manage it in the pages router you can very well manage it in the app router
if you are worried it might become a mess, then get the data in one single place and do prop drilling or make a context provider