Next.js Discord

Discord Forum

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

Unanswered
alfonsus posted this in #help-forum
Open in Discord
alfonsusOP
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

11 Replies

alfonsusOP
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.
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?
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
alfonsusOP
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
European sprat
https://react.dev/reference/react/use-client#use-client
i guess that tells us
alfonsusOP
thats a huge caveat o.o
European sprat
yeah it should probably be highlighted in some way haha
alfonsusOP