Redirect at server

[half depot]

hello there, i am not using React.Suspense,
when i redirect from page.tsx, in browser i first see layout.tsx content then after some seconds page redirects,

how can i redirect from server without returning any ui

you can see problem here
visit: https://arkive.webpanda.codes
explore pricing section and click on plus or pro plan, you will asked for login, use google for quick login then you will be redirected to dashboard where you can see my problem (layout ui flush)

[sterile ibex]

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)

[undone plaza]

Redirect before doing Suspense

you can't simply redirect under suspense without returning layout...

[half depot]

sorry bro, i am not using suspense any where

[undone plaza]

not even Layout.tsx?

[half depot]

never used

[undone plaza]

interesting.

[half depot]

i am using simple async / await with server components

and i know nextjs return full ui on request end, but dont know why its returning layout,

[half depot]

hi @undone plaza i search alot and got know that when i await (params/searchParams/cookies) etc. nextjs auto wrap my code in React.Suspense as these functions opt page in dynamic rendering

is there any way to opt out of

[hardy grove]

your layout component is gonna be rendered at first. Make the layout a client component and handle the ui that way. Otherwise you will get a flash screen. Try your solutions and test them with next build && next start before deploying

[ocean python]

I don't think making the layout component a client is ideal

As far as params and search params go if you do not access them and pass them to the child component, the parent component aka the page can remain static while making the child component that accesses the search params are params dynamic

Using cookies or search params does not opt. The component into dynamic until they are accessed. They can be passed as props without making the component. They come from dynamic

https://nextjs.org/docs/app/getting-started/cache-components

The docs say Components that access runtime values like cookies or searchParams cannot be prerendered. To prerender more of a page's content, you can pass these props down and access their values lower in the tree. For example, if you are reading searchParams from a <Page /> component, you can forward this value to another component as a prop:

import { Suspense } from 'react'
 
export default function Page({
  searchParams,
}: {
  searchParams: Promise<{ sort: string }>
}) {
  return (
    <section>
      <h1>This will be pre-rendered</h1>
      <Suspense fallback={<TableSkeleton />}>
        <Table searchParams={searchParams.then((search) => search.sort)} />
      </Suspense>
    </section>
  )
}```