Aurora Walberg Scharff - Enhancing Forms with React Server Components

take it if you want yeah this table is already I'm going to have to just get my stuff ready here yeah um oh and I have to connect this and it works and let's see if I'm going to get my notes okay

okay so thank you for that introduction and thank you react Paris for having me here I'm excited to be speaking today to tell you about enhancing your forms with react server components so the session is going to include mostly live coding with a goal of teaching you how to work with forms and RC's in practice so I was just introduced by my name is Aurora I'm from Norway uh work as a consultant and I'm actually using react server components in my current consultancy project so let's just Begin by looking looking at the typical react single page

application it's great you have your react query your reactor form all is well however client site apps have their problems they run purely with JavaScript and the entire application is constructed from JavaScript after the user opens the URL when working with for example from a slow device or with with a slow connection it can take a really long time to download and execute this JavaScript to even load the page to fill out a simple form in addition to submit

data to a database safely you would need a back end where you would also want to validate your data because relying only on client side validation isn't enough and even with a framework like nextjs you might still experience issues even though you fix your problem of blank screens by pre-rendering the pages you now have an even bigger dependency waterfall of server side rendering the page downloading parsing and executing the JavaScript and then hydrating the entire page before anything really works and let's not forget the struggles

of working with forms in the nextjs pages router you had to manually create your own API endpoints every time you wanted to submit safely to submit a form to the server you would want to use a library like trcp to ensure type safety you might have to write a bunch of excess messy code especially to handle errors and loading States overall it was not a good developer experience so react server components react server react components rendered on the server will let us fetch data

asynchronously inside components and access all our backend resources they can reduce the bundle size by minimizing JavaScript sent to the client and that is build performant apps while maintaining an enjoyable developer experience of course we also want to build apps that are accessible not only on a good computer or with fast internet we can do this by making our apps progressively enhanced Progressive enhancement is a strategy that puts emphasis on web content first allowing everyone to access the basic functionality of a

page while users with additional browser features or faster internet receive an enhanced version instead so this phrase emerged during a time of varied CSS and JavaScript support with many users actually browsing the web with JavaScript disabled today we are fortunate to develop for a much more consistent web however following these core principles still will lead to fast and resilient apps and while it's easy to think that only 5% of your users have slow

connections the reality is that 100% of your users have slow connections 5% of the time and everyone has JavaScript disabled until it's loaded so what we want to do is Rea use react server components to write performance progressively enhanced userfriendly forms without a lot of frontend complexity we're going to need a framework to use rsc's inside and nextjs is our pick here then we will be using use transition from react 18 which I don't need to explain anymore thank you