Ensure Functions only Run on the Server with `use server` Directive in SolidStart

Daniel Afonso
InstructorDaniel Afonso
Share this video with your friends

Social Share Links

Send Tweet

API Routes can fit your use case, but SolidStart provides a more straightforward way to turn your files and functions into server-only ones.

In this lesson, we will learn how to leverage the use server directive to make our functions server-executing only. One big benefit is that we'll get the types from the functions back now that we are using them directly.

[00:00] Right now, our fetch call is responsible for getting the data we need. Now, there is one issue with this approach. We lose our typings. What if instead, we could use the functions that interact with our storage directly and still keep the request server only? Well, with the use server directive, that is possible. Let us start by deleting our API routes as we won't need [00:20] them anymore. Then in our index file, let's remove our fetch call and use directly our get users function. As you can see, we got our typings back, and we know exactly what is the type of each property we use. Let's now do the same for a dynamic route. We remove our fetch call, and instead we call our get user function [00:40] and pass it the ID parameter. Finally, in our form, we also remove the fetch and call the add user function by passing it the user information. Now, to turn the entire user's file server only, we add the use server directive at the top of the file. Because of this, we guarantee that these functions will only be executed on the [00:59] server side. If we check our app running, we should see everything still works properly.