Add basic reference pages for use client and server #5976
Conversation
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 One Page Changed SizeThe following page changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
sophiebits
force-pushed
the
use-client-server
branch
from
dc6477a to
f994181
Compare
I guess this turned into a bit more of an FAQ but I think it's useful to have this written down in a canonical place.
sophiebits
force-pushed
the
use-client-server
branch
from
f994181 to
1c86d3b
Compare
There was a problem hiding this comment.
This is great, @sophiebits do you think we should add some kind of indicator that this is a "canary" feature? Approving because we can follow up to add that.
| * It's not necessary to add `'use client'` to every file that uses client-only React features, only the files that are imported from server component files. `'use client'` denotes the _boundary_ between server-only and client code; any components further down the tree will automatically be executed on the client. In order to be rendered from server components, components exported from `'use client'` files must have serializable props. | ||
| * When a `'use client'` file is imported from a server file, the imported values can be rendered as a React component or passed via props to a client component. Any other use will throw an exception. | ||
| * When a `'use client'` file is imported from another client file, the directive has no effect. This allows you to write client-only components that are simultaneously usable from server and client components. | ||
| push down |
This is what the Note at the top is for; don’t think it’s enough? |
|
¯\_(ツ)_/¯ I think this is better than nothing |
|
|
||
| ### `'use server'` {/*use-server*/} | ||
|
|
||
| Add `'use server';` at the very top of an async function to mark that the function can be executed by the client. |
There was a problem hiding this comment.
hm. I meant that it can be imported + triggered by the client
|
Yeah, I think I was looking for it to mention the "canary" specifically with a link to the versioning policy. |
|
For most APIs we’ll add I agree (probably with a specific version number noted) but for these specifically I’m not sure it’s helpful because checking the version won’t tell you if you’re already using an RSC framework and upgrading to canary won’t help you if you’re not. |
|
(Not opposed to adding it here for consistency though once we have a standard pattern!) |
I guess this turned into a bit more of an FAQ but I think it's useful to have this written down in a canonical place.