Fix incorrect component naming

[wyozi]

trafficstars

<form> must be rendered in a client component, since it uses a hook. This was correct in link href (use client) but not in link copy.

[facebook-github-bot]

Hi @wyozi!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[github-actions[bot]]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[Huxpro]

This paragraph is indeed confusing.

At a glance, the example is a Client Component rendering <form> that can fire a Server Action which will eventually return the error message back to the useFormState Hook over the wire. But wouldn't that mean the client can only display the error message until the client-side JS bundle is loaded and finishes its hydration? Assuming by "progressive enchantment" we meant the <form> is actionable when its belonging Client Component is SSR-ed but before it's hydrated.

But the title says "Display a form submission error without JavaScript". That's a bummer. My above demonstration clearly requires JavaScript.

So if the first demonstration is completely wrong, let's try from a different direction. What if we ARE indeed talking about <form> being within a Server Component that gets rendered and sent over the wire? In that case, <form> can still submit a Server Action to the server and get the updated render result (potentially with an error message) from the server, without having any(?) client-side JavaScript loaded. This seems to work, but it also seems like it broke two previous rules:

1. Server Components doesn't run Hook (is useFormState going to be an exception here? A Server Hook?)
2. The 'use server' directive is contained in the Server module. It was originally declared to annotate Server Action in client code

Ok I seriously need fact check from y'all @gaearon @sophiebits @sebmarkbage @acdlite

[sophiebits]

You can render a form from a server component or from a client component. useFormState can only be called in a client component, but it does progressively enhance (client components are server-rendered via traditional SSR like react-dom/server, they just can't access server-only resources).

We should not be saying "without JavaScript" because our streaming protocol uses a tiny amount of JS to replace suspense fallbacks with their content and for out-of-order streaming. Instead say that it works "before the JavaScript bundle loads" or "if the JavaScript bundle doesn't load".

[Huxpro]

@sophiebits how does the error be displayed if the JS bundle is not loaded? the useFormState Hook would only run after hydration ("progressive enhanced") right? The title is "Display a form submission error without JavaScript"

[gaearon]

During SSR, the Client component will get its useFormState result so it will be in the HTML.