Render content in layout.js via callback instead of using `children` #84990

fabian-michael-asi · 2025-10-17T07:16:48Z

fabian-michael-asi
Oct 17, 2025

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

Altering how layouts or pages are statically or dynamically generated.
Introducing new data fetching semantics.

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:

[locale]/layout.tsx
[locale]/(home)/layout.tsx
[locale]/(home)/page.tsx

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.

<script>
	let { children } = $props();
</script>

{@render children()}

Instead of:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  if (someCondition) notFound()
  return <html><body>{children}</body></html>
}

Allow:

export default function RootLayout({ renderChildren }: { renderChildren: () => React.ReactNode }) {
  if (someCondition) notFound()
  return <html><body>{renderChildren()}</body></html>
}

This would:

Defer child rendering until explicitly invoked by the layout.
Make control flow clearer.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Render content in layout.js via callback instead of using `children` #84990

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Render content in layout.js via callback instead of using children #84990

Uh oh!

fabian-michael-asi Oct 17, 2025

Goals

Non-Goals

Background

Proposal

Replies: 0 comments

Render content in layout.js via callback instead of using `children` #84990

fabian-michael-asi
Oct 17, 2025