Enhancing Forms with React Server Components by Aurora Scharff | React and Chill Conference

so I'm going to be doing a session with mostly live coding today um with the goal of teaching how to work with forms and RC's in practice so first about me you saw that was a really nice intro intro there but I'm from Norway I work as a consultant at in meta and I work in AO and I'm mostly working with FB development and in my current project at my consultancy I am actively building with RC so I hope to share some of my experience here uh from that with you

so let's begin by looking at this typical single page application it's great you have your react query your react form and all is well but as we know client ads have their problems so they run purely with JavaScript and the entire page or theab application is constructed from JavaScript when the user opens the URL if you're working for uh from a slow device or slow connection it can take a really long time to download and execute and uh uh part download person and

execute all this JavaScript to even load the page to you know fill out a simple form something like that and in addition to submit data to a database you would want to need a backend because you can't rely only on the client validation uh and even with a framework like next yes you might still have issues because even though you fix your problem uh of blank screens by randoming the pages you now have an even bigger dependency waterfall of uh downloading parsing executing the job JavaScript

then hyding the hydrating the entire page before anything really works and let's not forget the struggles of working with form in the nextjs pages router so back then uh you had to manually create your own API endpoints every time you wanted to safely submit a form to the server you would want to use a library like trpc to ensure type safety you might have to write a bunch of excess messy code especially to handle errors and loading States so

overall it was not a good developer experience so with the react server components uh which was announced as RC at react conf in may we now have server components react server components will run only on the server so therefore we can fetch data asynchronously inside components and access all our backend resources which will reduce the bundle size by minimizing the JavaScript sent to the client and then let us build performant apps with enjoyable developers experience

so what we want to do today is use react server components to write performant userfriendly forms without a lot of front and complexity we're going to need a framework uh to use RC's inside and nextjs with the app rouder is our pick here then we will be needing multiple other react 19 features that are already available in the app router which are server actions the form component use action State use form status and use optimistic

so server actions are defined with use server and tells the framework like nextjs to generate a post endpoint to a function that allows us to call it from any component for example from a client component it simplifies the communication across the server boundary while providing type safety with RPC the form component is reacts uh extension of the Native form component which now Builds on top of its existing methods the extension will let you create interactive controls um for

submitting information for example by letting the action property now also call a function typically it could be a server action so the function you pass will automatically be wrapped in transition contain a hidden form data argument with the values of the form and in the case of a server action be called as a HTP post the Ed form status Hook is a hook that provides information about the last form submission it can be used in inside