Using "use client" in Page.js and Layout.js 🤔 | Next.js | Page 1

hardy pivot Aug 30, 2023, 2:58 AM

#

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

Routing: Pages and Layouts

Create your first page and shared layout with the App Router.

balmy ironBOT Aug 30, 2023, 2:58 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

hardy pivot Aug 30, 2023, 2:59 AM

#

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.

thick vigil Aug 30, 2023, 3:00 AM

#

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?

lofty chasm Aug 30, 2023, 3:09 AM

#

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

hardy pivot Aug 30, 2023, 3:53 AM

#

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

thick vigil Aug 30, 2023, 3:59 AM

#

https://react.dev/reference/react/use-client#use-client

'use client' – React

The library for web and native user interfaces

#

i guess that tells us

#

https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs and there

Rendering: Client Components

Learn how to use Client Components to render parts of your application on the client.

hardy pivot Aug 30, 2023, 4:02 AM

#

thats a huge caveat o.o

thick vigil Aug 30, 2023, 4:03 AM

#

yeah it should probably be highlighted in some way haha

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