How do i redirect when trying the new cacheComponents?
Unanswered
Odorous house ant posted this in #help-forum
Odorous house antOP
I was meaning to convert one of my apps to use the new cache components but ran into an immediate issue of not knowing how to handle this
type PageProps = {
params: Promise<{
slug: string;
}>;
};
const Page = async (props: PageProps) => {
const params = await props.params;
const slug = params.slug;
const session = await getSession();
if (!session) {
return redirect(`/auth/login?nextPath=/dashboard/${slug}`);
}
return (
<main className="flex h-dvh flex-1 flex-col px-5 pb-5">
<PageHeader>Welcome back</PageHeader>
<AIChatForm slug={slug} />
</main>
);
};
export default Page;8 Replies
Odorous house antOP
this component now throws:
how do i fix it? the session doesnt belong in the child component
Uncached data was accessed outside of <Suspense>how do i fix it? the session doesnt belong in the child component
@Odorous house ant this component now throws:
Uncached data was accessed outside of <Suspense>
how do i fix it? the session doesnt belong in the child component
Goldstripe sardinella
Any async component should be wrapped with suspense. In your case just make a loading.tsx and you should be good i think
Odorous house antOP
are we saying that auth redirects should happen in
loading.tsx? that seems a bit strange, i thought the whole point of cache components is to avoid the whole loading.tsxno, he is saying to add a blank loading.tsx, then still do your redirect in page.tsx
im curious to know what is inside your getSession
Odorous house antOP
just authorization checks, check to see if you're logged in and if u have access to this organization
@Odorous house ant just authorization checks, check to see if you're logged in and if u have access to this organization
ok so in next16 and cachedComponent: true, you're supposed to have a static root shell and have dynamic part wrapped in Suspense (either via <Suspense> or loading.tsx)