'use server' fleshing out #6384
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. |
lunaleaps
requested review from
davidmccabe,
elicwhite,
mattcarrollcode,
kmiddleton14 and
sophiebits
| To read a server action return value, you'll need to `await` the promise returned. |
There was a problem hiding this comment.
I am pretty sure this is right and reasonable, but I'm curious how to explain why you should be using await here and not using the use function. Is it because we are inside an async function already so it is fine, and also we don't want to make this component suspend while waiting for the server response, you handle that with the pending flag instead of suspense?
There was a problem hiding this comment.
Hmm that's a good callout. Yea I don't think use should be used in this callback..but I'm going off intuition. @sophiebits is that right? Would we ever want to call a server action in render? I guess they're always called in transitions..
Edit: Trying out use, I get the following error
Error: Hooks are not supported inside an async component. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.
There was a problem hiding this comment.
use() is only to unwrap a resource during the render pass (i.e. in a component body or in a setstate updater). Not in nested functions like the imperative one here.
You shouldn't call a server action in render; refactor your code so you don't have to (plus, SSR won't let you).
There was a problem hiding this comment.
there is one big error in this which is that progressive enhancement 100% works with client components! as long as it's a server action on the form, then SSR of the client component will output the right thing
and useFormState is a client hook! it cannot be imported from a server component. the only hooks that can be used in server components are use and useId (and technically useContext which is being removed, useCallback useDebugValue useMemo which are noops)
|
Updated and ready for another review! |
Co-authored-by: Sophie Alpert <git@sophiebits.com>
Co-authored-by: Sophie Alpert <git@sophiebits.com>
Co-authored-by: Sophie Alpert <git@sophiebits.com>
| @@ -203,4 +201,15 @@ function LikeButton() { | |||
| } | |||
| ``` | |||
|
|
|||
| ```js | |||
| // actions.js | |||
There was a problem hiding this comment.
I'm fleshing out the action as I want to illustrate that you need the directive on the module level
Preview: https://react-dev-git-use-server-fbopensource.vercel.app/reference/react/use-server