Next.js Discord

Discord Forum

How do i redirect when trying the new cacheComponents?

Unanswered
Odorous house ant posted this in #help-forum
Open in Discord
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;

6 Replies

Odorous house antOP
this component now throws:
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.tsx
alfonsüs ardani
no, 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