Channel
Interviewed Person
Aurora Scharff
Interviewed: Aurora Scharff
[Music] this conference is brought to you by callstack a total software engineering consultancy [Music]
I heard there were supposed to be some kind of sparkles I don't know if I got that if not I'm really bummed because that sounds cool um so um thank you for the introduction and thank you for having me here react Universe com my name is Aurora I'm a web developer from Norway and I work as a as a consultant at in meta in oo and we have a very similar name it's very confusing but that's not meta and um I also had kind of a hectic travel I was invited last minute um and
that's why I'm really excited to be teaching you today about working with forms and react Ser components in practice um and I'm going to be coding a simplified version of something that I've made for my current consultancy project uh where it's working well for us uh so let's get started by looking at the setup so I'm here in the nextjs app router and uh using Prisma as my Oram and a local database and then I have tailwind and um since I'm using the app router everything here is a server
component by default so everything you see on the page is a server component and the message box component is also a server component and what that means is that this component will run only on the server and will never have any js on the client and that's why we can do database queries inside here so uh the get messages function uh is querying the database and getting messages and then it's also getting the current user and mapping into individual message display components
and again this is uh doesn't require any interactivity so it's just going to be a server component styling based on whether the user has written the message and finally there's a message input this one doesn't do a whole lot yet uh can try it out nothing's going to happen um so the goal here is to enhance this message box with react server components and make it interactive while minimizing the js on the client anded using the frontend complexity so let's
get started by making this form work we're going to do that by using the react 19 extension of the form element with the action property which can now call a function we're going to bind it to a server action uh that's uh going to be submit message and I will Define that inside my data access layer here uh submit message and since it's going to be a server action we will use the directive use server and what this will do is
essentially Define a or create a hidden API endpoint that allows us to expose the functions inside this file to the client and call them from anywhere and we also get type safety through RPC so I'm going to export Asing function here uh which is submit message and this will take in a form data object of type form data um let's see form data uh is it supposed to be Capital
yeah and what this means is that each input inside the form will be submitted with its value inside this form data object and we can use this um to create uh to create mutate in our database and create a message with some data where the content will be from the form data and we also need a uh created by ID here which means that it needs to somehow pass an ADD add
