Server Functions

[00:00:00]
>> What if we don't wanna fetch isomorphic li we want this always to happen on the server? And for that reason we came up something we like to call server functions. And server functions, denoted by this dollar sign cuz they're kind of like a compiler trick, or our ability to basically make RPC calls, anywhere that's remote procedure calls.

[00:00:21]
So we can do something like pretend like a hello, let's say, and we can go wrap a function, an async function here like this, and this code Will only run on the server. What I mean by that is, I could take this hello here, and let's say, call it inside our route data.

[00:00:53]
And we see hello from the server, and if we look at our client app when we refresh our page, essentially We're not actually gonna see it here, okay? Beautiful, okay? Now, what's really cool about this though, is pretend we actually wanna parameterize it. We wanna add some arguments here, like a name.

[00:01:34]
Well, you saw what happened in this immediately. Hello is, hey, I'm expecting one argument, not zero arguments. Using server calls allow us to be keep types as well as typesafe as we can across this boundary. So if I try and pass it like zero, it's gonna be like, nope, not a number, we wanna a string.

[00:01:52]
And essentially, we have this ability to kind of type our arguments anywhere and do these functions that literally just run on the server. And this is really powerful because, it means we can do stuff like, we can say this fetch API. If I always wanna it to run on the server, well, I could always run it on the server and now it's that could be a database call, or whatnot.

[00:02:19]
So when I run this in dev now what you're gonna see, is that yes, the initial page always runs on the server anyways. But now when we navigate, what you're gonna see is instead of hitting the specific endpoint the hacker news endpoint I was looking at earlier. We're actually hitting our own local server with this kind of trumped up URL here.

[00:02:43]
And that's kind of the power here, with server functions you can have as many as you want, in the same file. And we generate a URL in the background, and you don't worry about that wiring essentially. So, the server function itself, has a dot URL on it, if you need that for the API you're using.

[00:02:58]
But generally speaking we can use server functions to basically declare as many route fetches or actions as we want in a file. So this a little clunky so to make our lives a little bit easier Solid state actually has this as a kind of first class API, instead of createResource if you go createRoute or ServerData$ let's see.

[00:03:30]
No, not that let's import it, and it simplifies things a little bit and essentially, let's get here from this createServerata$. And swap over All right? All right, sorry API's updated slightly. We can pass into our the first argument to a server function as always the server function to make sure that it runs on the client that's what the dollar sign convention means.

[00:04:15]
So we just need to set this as our key, and Now We have the same kind of working API and it's a little bit slimmed down it makes it easier. So quite often with a lot of these kind of a lot of loader type function scenarios where you're just doing all your data fetching on the client, you're just gonna kind of go in here and go, okay?

[00:04:47]
It's a kind of doing this song and dance where there's a whole bunch of extra features from createResource, you can simply just go createServerData$. And then just return this and essentially we can set our key to this and assuming that it imported. Import createServerData$ from solid-start/server, we now have for our stories route as as well, the same sort of API consideration.

[00:05:37]
Here, okay? So this pattern allows you to basically co locate database queries and whatnot and it all works with transitions and suspense