cachedComponents: true with redirect
Unanswered
Polar bear posted this in #help-forum
Polar bearOP
Hi! I am looking to enable cachedComponents: true in my app but I am having trouble figuring out the best way to keep my previous redirect patterns. My app has 20 pages~ and each page handles can redirect differently based on cookies + auth data from cookies so putting this in proxy will be tough. However, cachedComponents require me to wrap the redirect logic with Suspense due to cookies and I lose the "server" 307 redirect where the page must be streamed to the client first before the redirect happens now. I understand my ask is a deoptimization of what cachedComponents offer but the <Activity /> usage of cachedComponents is great for our app and I don't want to turn it off 🙁 Is there anyway to "bypass" or "opt out" of this behavior for a particular page? if not, how are people handling their existing server redirects?
14 Replies
Greek Shepherd
I was looking into this too but since you can use the use cache directive on any component, cant you just keep ur redirect login in the main page and move ur cacheable content to a subcomponent and use cache there?
Polar bearOP
do you have a code example of how that looks like?
let's also assume the entire page is dynamic where it will only render the main content after an API call. so it is basically wrapped with a suspense using a loading indicator. however, reading cookies is fast enough for our app so we don't mind the user waiting for the cookies logic for each dynamic page to resolve before rendering.
let's also assume the entire page is dynamic where it will only render the main content after an API call. so it is basically wrapped with a suspense using a loading indicator. however, reading cookies is fast enough for our app so we don't mind the user waiting for the cookies logic for each dynamic page to resolve before rendering.
Greek Shepherd
Well if the cookies r required for the dynamic bits then the clients gonna have to wait for it anyway. Thats the same as before cache components. Only cache components force u to suspend render for example for cookies (or any api that requires runtime data) so that ur forced to show a fallback. If the data doesnt change often u can use
https://nextjs.org/docs/app/getting-started/cache-components#with-runtime-data
use cache:https://nextjs.org/docs/app/getting-started/cache-components#with-runtime-data
Polar bearOP
That’s what we are running into right? It forces suspend so I can’t do a server redirect without executing client code first but I want to opt out of it for particular pages.
Greek Shepherd
The cookies() function is server side tho 🤔 which client code do u have to run
@Polar bear That’s what we are running into right? It forces suspend so I can’t do a server redirect without executing client code first but I want to opt out of it for particular pages.
Milkfish
If you don’t want child components to hit a Suspense boundary just for reading cookies, move the cookie fetching logic and redirect checks into the page file. Since you don't need to wrap the page component in a suspense boundary, the redirect will run before anything else in that component executes.
@Milkfish If you don’t want child components to hit a Suspense boundary just for reading cookies, move the cookie fetching logic and redirect checks into the page file. Since you don't need to wrap the page component in a suspense boundary, the redirect will run before anything else in that component executes.
Polar bearOP
but that would be a client redirect at that point which executes JS first
export default async function Page() {
const cookie = (await cookies()).get('authCookie')
if (!cookie) {
redirect('/login')
}
return (
<Suspense fallback={<div>Loading...</div>}>
<MainPageContent />
</Suspense>
)
}
this is kinda what I am looking at with cachedComponents enabled
const cookie = (await cookies()).get('authCookie')
if (!cookie) {
redirect('/login')
}
return (
<Suspense fallback={<div>Loading...</div>}>
<MainPageContent />
</Suspense>
)
}
this is kinda what I am looking at with cachedComponents enabled
this could work with it disabled and I am trying to find a way to keep this behavior even with cachedComponents enabled so that the redirect isn't done a metatag injection on the client
@Polar bear but that would be a client redirect at that point which executes JS first
Milkfish
Not really.
The redirect function always does a 307 or 303 (when used in a server action) and it always runs on the server.
The redirect function always does a 307 or 303 (when used in a server action) and it always runs on the server.
@Polar bear this could work with it disabled and I am trying to find a way to keep this behavior even with cachedComponents enabled so that the redirect isn't done a metatag injection on the client
Milkfish
That's odd.
My setup is the same, and it works perfectly
My setup is the same, and it works perfectly
Polar bearOP
So you have cached components enabled + the redirect is doing a 307 for you with above code?
Milkfish
yeah
Polar bearOP
Strange, not sure how that works since you are required to have a suspense boundary which streams your HTML immediately while awaiting cookies