Redirect at server
Unanswered
Giant Angora posted this in #help-forum
Giant AngoraOP
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)
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)
18 Replies
you can't simply redirect under suspense without returning layout...
Giant AngoraOP
sorry bro, i am not using suspense any where
not even Layout.tsx?
Giant AngoraOP
never used
interesting.
Giant AngoraOP
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,
Giant AngoraOP
hi @alfonsüs ardani 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
Mini Rex
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
Morelet’s Crocodile
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
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 { Table, TableSkeleton } from './table'
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>
)
}@Morelet’s Crocodile I don't think making the layout component a client is ideal
Mini Rex
Layout components can be nested. So only make the layouts client side that need to be client side. You gotta understand what parts are client side and what parts aren't. Then you can handle the issue gracefully