'use client' - flesh out usages and reference #6362
Conversation
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
| <Intro> | ||
|
|
||
| `'use client'` marks source files whose components execute on the client. | ||
| `'use client'` marks which components render on the client. |
There was a problem hiding this comment.
(I realize this is a draft so not reviewing in detail but wanted to note one high-level thing…)
thought: is there a way we can be clear up top that this marks the boundary between server and client components? ideally people should realize that you need serializable props and that you don't need to mark every file deep down. it's great you have FancyText but I think it could be a bit clearer throughout
(obviously my intro text you replaced did not even try to clarify this! oops. what you wrote here is a clear improvement)
There was a problem hiding this comment.
Updated to try and highlight the concept of boundary more
Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
davidmccabe
left a comment
davidmccabe
left a comment
There was a problem hiding this comment.
This is a great doc. Some suggestions. I'll get to the Usage section later this afternoon.
| ### `'use client'` {/*use-client*/} | ||
|
|
||
| Add `'use client';` at the very top of a file to mark that the file (including any child components it uses) executes on the client, regardless of where it's imported. | ||
| Add `'use client'` at the top of a file to mark the module and its transitive dependencies as client code. |
There was a problem hiding this comment.
This use of "transitive dependencies" is correct but my brain erroneously interpreted it as "transitive dependents" instead. I wonder if we could say something like "and any other modules it imports".
There was a problem hiding this comment.
I think that weakens the definition though because 'any other module it imports' may be only interpreted as one level
| } | ||
| ``` | ||
|
|
||
| 2. A "component" can also refer to a **component callsite** of its definition. |
There was a problem hiding this comment.
A "component" can also refer to a component instance created by using the component as an element within some other component.
There was a problem hiding this comment.
I don't think we use the word "callsite" elsewhere. Technically speaking they aren't callsites as the component function is not called. They are technically elements but might more clearly be referred to as instances.
There was a problem hiding this comment.
I've heard conflicting thoughts on this from @eps1lon as I originally had them as instances. There was mention it may be confused with the runtime instance.
Before callsite, I used "use", like "component usages"
There was a problem hiding this comment.
I'll go back to usage for now
|
I think reading through the Usage section here has swayed me away from capitalizing Client Component. |
Co-authored-by: David McCabe <davemccabe@gmail.com>
6 participants
Flesh out reference docs for 'use client' by adding more thorough explanation and usage examples
Preview