Enhancing Forms with React Server Components | Aurora Walberg Scharff

[Music] [Applause] um thank you for that introduction Ashley and thank you Ron for having me here

um hold on just going to unlock my screen here so uh my name is Aurora I'm a web developer coming all the way from Norway and I work as a consultant at in meta in alsoo and that's not meta but in meta which is funny now being surrounded here by all these meta people um but anyway I'm excited to be speaking today to teach you how to enhance your forms with react Ser components and I'm going to be coding a simplified version of something that I've built for my current consultancy project where I'm actively

using RC and it's working well for us um so let's look at the setup here so um I'm here in a message box component which is an async uh server component and it's asynchronously fetching data from the uh excuse me let me just present um my setup first this is now the nextjs app router uh and I'm using Prisma as an oam and a local database using sqlite and Tailwind so um the message box component

is a server component and is async because it's asynchronously fetching data from the database with Prisma here and it's mapping these two individual message display components and this is also a server component because it's essentially just showing some uh UI here based on whether the user has written the message and then there is a message input and this is just a form that doesn't do anything uh and I can just try it out doesn't do anything so uh let's enhance this with

react Sur components and react 19 and the goal will be to make this interactive while reducing the front and complex complexity and minimizing the js on the client so let's start by making this form work so I'm going to use react 19's extension of the form element to bind this to a um server action um excuse me submit message and this could be an action on the client but since we're using server

components we can use a server action here I'm going to make a new file for this and this is going to be a server action so we need the use server directive and this essentially means that this function can now be called from anywhere uh like from a client component because it has a hidden post endpoint generated so I'm going to export an async function um called submit message and it will take in a form data object here of type form data

and what this means is that each field inside this form will be submitted with its value in this form data um yeah pretty much that's it and we can use that to submit uh to the database so I'm going to create a message in the database with some data and this is going to be um have a Content which let's do that later which where we can get the uh content value from the form data I'm going to type this as a string for

now um and then we need to pass a created by ID here to know who has created the message so I need to pass additional arguments to my server action here and there's a couple ways you can do this uh you could do a DOT bind on a function to pass initial arguments to a function or you can use a hidden input field so I'm going to do that here and I'm just going to call it user ID and now I will have this inside my form