Understand the way layouts/templates render
Answered
Trigg Hound posted this in #help-forum
Trigg HoundOP
Can someone help me understand the way layouts/templates/pages render and in which order they render?
My initial impression of the order things render is Root Layout -> (any layouts) -> page layout -> page. This was my initial thought of how things rendered, but when I'm logging my layout components it seems to be logging things in the exact opposite order where the root layout logs last?
I am trying to do an auth check at the signed in layout and refresh tokens if the access token expires, however the page layout runs before the auth check happens so it throws an error. Am I misunderstanding the flow in which things render in nextjs? Would a template fit my need better than a layout if I want it to render every single time on a navigation and do an auth check?
My initial impression of the order things render is Root Layout -> (any layouts) -> page layout -> page. This was my initial thought of how things rendered, but when I'm logging my layout components it seems to be logging things in the exact opposite order where the root layout logs last?
I am trying to do an auth check at the signed in layout and refresh tokens if the access token expires, however the page layout runs before the auth check happens so it throws an error. Am I misunderstanding the flow in which things render in nextjs? Would a template fit my need better than a layout if I want it to render every single time on a navigation and do an auth check?
Answered by Australian Freshwater Crocodile
Yes you should use a template to wrap your page and make it re-render when the url route segment changes so it makes the auth check again, layouts aren’t a good place to do an auth check because the same layout maintains across all pages under it.
9 Replies
Australian Freshwater Crocodile
Yes you should use a template to wrap your page and make it re-render when the url route segment changes so it makes the auth check again, layouts aren’t a good place to do an auth check because the same layout maintains across all pages under it.
Answer
Trigg HoundOP
okay got it, I should use a template, but what about the order in which those layouts render? from what it looks like is that the page layout.tsx logs something, then my app layout logs something, and then the root layout logs it's thing.
Unless my core understanding nextjs is wrong, shouldn't it be the other way around where the root layout/entry point of the app logs it's thing first/run first?
Unless my core understanding nextjs is wrong, shouldn't it be the other way around where the root layout/entry point of the app logs it's thing first/run first?
This is the order in which my components are running in
// page layout will change to a template
{ type: 'access_token', path: '/site-settings' }
CHECK_PERMISSION { validPath: '/site-settings' }
{ type: 'access_token', path: 'layout' }
running app layout -> app template.tsx
running root layout -> root layout.tsxAustralian Freshwater Crocodile
Yes that’s what I would think
Where children is either a page or nested Layout … (repeats)
<Layout>
{/* Template takes automatically a unique key. */}
<Template key={routeParam}>
{children}
</Template>
</Layout>Where children is either a page or nested Layout … (repeats)
Trigg HoundOP
oh wait... I think I'm incredibly dumb
I'm so stupid I was reading my own logs wrong and I was reading it from bottom to top instead of top to bottom
it's been a long day
Australian Freshwater Crocodile
🤣🤣🤣🤣
Happens