Edits for new "use client" content #6401
Conversation
sophiebits
force-pushed
the
use-client-edits
branch
from
e081d6f to
ed60af2
Compare
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! 🙌 |
| // ... | ||
| return | ||
| <Link /> | ||
| // ... |
There was a problem hiding this comment.
found this syntax awkward. changed to a Button because I couldn't think of a variable name for the link
| @@ -179,7 +178,7 @@ First, let's clarify that the term "component" is not very precise. Here are jus | |||
| ```js | |||
| // This is a definition of a component | |||
| function MyComponent() { | |||
| return <p>My Component</p> | |||
| return <p>My Component</p> | |||
There was a problem hiding this comment.
changed from tabs (which render as 4 spaces) to spaces (2)
|
|
||
| For simplicity, we talk about Server Components, but the same principles apply to all code in your app that is server run. | ||
|
|
||
| #### Advantages {/*advantages*/} | ||
| #### Advantages of Server Components {/*advantages*/} |
There was a problem hiding this comment.
I only made minor edits here but I don't love this section in its current form. I think of this less as advantages/disadvantages and more that in many cases they are for different things! more like
- unique capabilities of server components
- unique capabilities of client components
- when to prefer one or the other if you don't need either one
| </Diagram> | ||
|
|
||
| In the module dependency tree of the example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as client modules. It creates a subtree of client modules with `InspirationGenerator.js` as the root. | ||
|
|
||
| During render, the framework will server-render the root component and continue through the [render tree](/learn/understanding-your-ui-as-a-tree#the-render-tree), opting-out of evaluating any code imported from client-marked code. |
There was a problem hiding this comment.
this whole part is still a bit confusing for SSR particularly
| return <Counter initialValue={initialValue} /> | ||
| } | ||
| ``` | ||
|
|
||
| For example, the parent component of the Client Component `CounterContainer` does not require `'use client'` as it is not interactive and does not use state. In addition, `CounterContainer` must be a Server Component as it reads from the local file system on the server. This is possible because Server Components, unlike Client Components, can be async functions. |
There was a problem hiding this comment.
we will support async functions on the client so this isn't why
There was a problem hiding this comment.
We can have async components on client?
Edit: Oh I see, future-tense
| @@ -332,13 +333,15 @@ export default function FancyText({title, text}) { | |||
| } | |||
| ``` | |||
|
|
|||
| In this case, it is discouraged to use the `'use client'` directive as it prematurely forces all component usages of `FancyText` to be rendered on the client, which comes at a performance cost. As demonstrated in the earlier Inspirations app example, `FancyText` is used as both a Server or Client Component, depending on where it is imported and used. | |||
There was a problem hiding this comment.
(first sentence was overly prescriptive)
|
|
||
| ### Using client APIs {/*using-client-apis*/} | ||
|
|
||
| Your React app may use client-specific APIs which are dependent on your targeted client. For the browser, some example client APIs include web storage, audio and video manipulation, and device hardware, among [others](https://developer.mozilla.org/en-US/docs/Web/API). |
There was a problem hiding this comment.
I think you were trying to be agnostic to web vs native here? but I think it was a bit confusing in practice and better to be clearer
(most of our docs are written with web in mind; I think we probably need a bigger rethink terminology-wise before we could truly update them to be agnostic)
| @@ -350,26 +353,27 @@ export default function Circle() { | |||
| useLayoutEffect(() => { | |||
| const canvas = ref.current; | |||
| const context = canvas.getContext('2d'); | |||
| context.reset(); | |||
There was a problem hiding this comment.
effects can run multiple times :) like with offscreen in the future (and also because [] deps aren't specified here)
could've put this in the unmount but I put it here
Co-authored-by: Luna <lunaleaps@gmail.com>
No description provided.