How do i redirect when trying the new cacheComponents?

[meager swallow]

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;

[ocean mantle]

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)

[cold talon]

Please add more information to your question

Your question currently does not have sufficient information for people to be able to help. Please add more information to help us help you, for example: relevant code snippets, a reproduction repository, and/or more detailed error messages. See more info on how to ask a good question in https://discord.com/channels/752553802359505017/1138338531983491154 and #welcome message.

Requested by guy who pings riskymh too much

[meager swallow]

this component now throws:

Uncached data was accessed outside of <Suspense>

how do i fix it? the session doesnt belong in the child component

[blissful lynx]

can we see the full error?

[silent peak]

Any async component should be wrapped with suspense. In your case just make a loading.tsx and you should be good i think

[meager swallow]

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

[blissful lynx]

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

[meager swallow]

just authorization checks, check to see if you're logged in and if u have access to this organization