Render content in layout.js via callback instead of using children
#84990
fabian-michael-asi
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Goals
Avoid unnecessary rendering: Prevent page components from rendering if a parent layout exits early (e.g. notFound(), redirect(), or conditional rendering).
Simplify the mental model: Switch from the current bottom-up (leaf → root) render flow to a more intuitive top-down (root → leaf) flow.
Potential performance benefits: Reduce redundant component tree creation when layouts decide not to render children.
Non-Goals
Background
We ran into the same issue described here: i18nexus/next-i18n-router#78
To fix it, we had to add identical early-return logic to multiple files:
Ideally, early returns like notFound() or redirect() should be possible in the root layout alone. However, because Next.js currently renders from the leaf upward, lower-level layouts and pages still render before the parent layout decides whether to continue.
Proposal
I searched for similar proposals but couldn’t find anything comparable. I’m also not sure if this approach would be technically feasible, but I think it’s worth discussing.
The idea is to introduce a render callback pattern for layouts, similar to how SvelteKit handles it.
Instead of:
Allow:
This would:
Beta Was this translation helpful? Give feedback.
All reactions