Next.js Discord

Discord Forum

Using "use client" in Page.js and Layout.js 🤔

Unanswered
Alfonsus Ardani posted this in #help-forum
Open in Discord
Avatar
Alfonsus ArdaniOP
Anyone have any resource, docs, articles mentioning why its an antipattern to use "use client" in page.js and layout.js?
I myself have encountered inconsistencies and effect in stability when using "use client" in page.js and layout.js.
But I couldn't find any mention on that on the documentation (or were not able to)

The picture mentions that page.js and layout.js can be a client component but seem to not explain why it shouldn't have to
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
Image

11 Replies

Avatar
Alfonsus ArdaniOP
The picture only shows pages can be set to client component but theres also a good to know callout on the following section pointing that layout too can be a client component.
Avatar
European sprat
i'm sure you already know this and i'm guessing you're posting this looking for discussion but setting page or layout to client makes all the children client too right?
Avatar
DirtyCajunRice | AppDir
It is an anti-pattern because of what jarrah said, but more specifically because layouts and pages are your “top level” entry point into that part of your code respectively. It should be server to allow some, if any, server components to actually render as server components. you completely remove that ability by making the top level client
Avatar
Alfonsus ArdaniOP
Im looking for a credible source of article that i can point to
but i gues you are right, I forgot that setting "use client" on the top makes all imported files becoming client
Avatar
European sprat
i guess that tells us
Avatar
Alfonsus ArdaniOP
thats a huge caveat o.o
Avatar
European sprat
yeah it should probably be highlighted in some way haha
Avatar
Alfonsus ArdaniOP
Image