My Favorite Framework Just Got Better

Hinzugefügt: 2026-06-04

[00:00:00]Hey friends, a while ago my favorite framework SvelteKit added a new feature called remote functions, which is an improvement over the existing load functions for type-safe communication between the client and server. If you're not familiar with remote functions, I'm going to give you a brief overview of how they work, but the main focus of this video is going to be the new SvelteKit feature for working with real-time data. At the moment of recording this video, remote functions are experimental, so you have to enable them in your Svelte config. So, if you go to your Svelte config, you can enable the experimental feature for SvelteKit called the remote functions. And you also need to enable the async flag for Svelte.

[00:00:38]But, if you're watching this video by chance in the future, then this is not necessary. And with SvelteKit 3 around the corner, I'm going to make a dedicated video on remote functions.

[00:00:49]All right, so what problem do remote functions solve? Well, currently data loading in SvelteKit is based on the route. So, let's say for example that we have route slash. Now, we have to create this file plus page.server.

[00:01:02]And inside this file, we're going to create a load function that loads some data from the server.

[00:01:07]And now we can get this data through props. But, here is the tricky part.

[00:01:12]Now, we have to pass this data to a component. And this component might not even care about this data, but its children might. And this can be tedious, so we reach for solutions like context.

[00:01:24]So, in this example, where we're using a load function on the server, we're going to return these frameworks.

[00:01:30]And then here we're using SvelteKit form actions. So, now we have to do this song and dance where we do request.formdata.

[00:01:37]And now we can parse this data safely using a validation library like Valibot.

[00:01:42]And unless you're using some form library, now we have to take care of everything yourself.

[00:01:47]In contrast, remote functions are much simpler. Here we can use a simple query remote function, so we can return the frameworks from the server.

[00:01:57]And then we can use another remote function called form, which has built-in validation. And you can use any popular validation library that you want. And now we also get easy access to the form data.

[00:02:11]Keep in mind that we just created a data.remote file, which we can place anywhere. So now we can just import what we need inside of a component.

[00:02:21]So here we import get frameworks and add framework. So we can loop over the frameworks and display them in a list.

[00:02:28]And this is the most powerful part. We can just spread add framework, which is going to add the necessary attributes required for the form. And this also adds progressive enhancement, so our form also works without JavaScript.

[00:02:41]And issues are also handled for us.

[00:02:45]And we can display any custom data that we want.

[00:02:50]So with remote functions, we get component level data loading. So we can just slow data on the component level where it's required instead of the page where we have to pass it as data.

[00:03:02]And I already recorded a video in the past where we built a project using remote functions, which is still relevant if you want to check it out.

[00:03:13]And for a while in SvelteKit, there was a missing piece for working with real-time data. You could have used web sockets and server-sent events in a roundabout way, but it wasn't really intuitive.

[00:03:25]Until SvelteKit introduced a new remote function called query.live for accessing real-time data from the server.

[00:03:33]So here is how it works.

[00:03:35]In this example, we have a count query by using query.live and passing a generator to it. And inside of the generator, we initialize a count as zero, and then we have a while loop where we increment the count and yield it every second using a promise. And here is how it's used inside of a Svelte component. So, we can simply import get count from counter.remote.

[00:03:59]And we can await get count in the template.

[00:04:02]Now, we can use live queries to send an update to every client that connects to us.

[00:04:09]How cool is this, friends?

[00:04:14]And you don't even have to worry about calling these queries multiple times because multiple instances share the same connection. And this is true for every remote function.

[00:04:25]Even if you invoke the same remote function in multiple places, it's going to be called once.

[00:04:31]So, SvelteKit under the hood takes care of the duping for you. But, of course, if you prefer, you can still initialize this inside of the script tag. So, here we can say count equals get count. And we can await the count, and we can also use some other methods that are available to us, such as count.connected to get the connected status, and count.reconnect if we need to reconnect.

[00:04:57]You might be confused if you never used a generator.

[00:05:01]But, generators are just special JavaScript function that can pause and resume a function execution.

[00:05:07]So, in this example, we have a counter generator that is going to yield an incremental number forever. We denote generators by using the special star symbol.

[00:05:17]So, we can initialize the generator by saying gen equals counter.

[00:05:22]And now, anytime we invoke dot next on the generator, it's going to advance the generator and yield the value.

[00:05:29]In this example, we're going to see zero and one logged to the console.

[00:05:33]And we can also delegate other generators. So, here we have another generator called delegated.

[00:05:41]We can yield a value using the regular yield keyword. But, if we say yield star, then we can yield another generator.

[00:05:49]And this is the basics of how generators work.

[00:05:55]What's also interesting is that generators work really great with streams.

[00:05:59]Under the hood, SvelteKit uses our raw stream that it writes the data to.

[00:06:04]We can recreate this in SvelteKit by using a get endpoint inside of a plus server file.

[00:06:10]We can define our generator the same as before.

[00:06:14]Next, we can create a readable stream, and we can pass it the pull method, which converts an iterator to a stream.

[00:06:21]And under the hood, SvelteKit uses the value to serialize data. So, things like map and date also work instead of using JSON.stringify.

[00:06:30]And then we can just return the response by passing the stream and the headers.

[00:06:35]And then it looks something like this on the client.

[00:06:38]So, inside of the fact, we're going to fetch the stream endpoint. And then we're going to read the chunks until the stream ends in an infinite loop. And of course, in this case, we also have to parse the ND JSON data and update any state. So, this is how SvelteKit approximately does it under the hood.

[00:06:56]But of course, it also takes care of server-side rendering, plus hydration, and so on.

[00:07:03]All right, so let's look at some examples. In this example, we're going to create a live poll. And even though it's hardcoded, you can easily make it customizable.

[00:07:13]So, here I created a poll.remote file.

[00:07:16]We have results and some listeners.

[00:07:19]Here we have a get poll query, which uses query.live, and inside of here we have an infinite loop. So, we're going to yield the results.

[00:07:28]And instead of polling every second and wasting CPU cycles, I'm going to use promise with resolvers. So, we can pass the resolve method to the listeners, and then we can await the promise.

[00:07:38]And to be honest with you, I just wanted an excuse to use promise.withresolvers.

[00:07:43]You caught me.

[00:07:44]Next, we're going to use a form remote function to cast the vote.

[00:07:49]We're going to validate the form data, and then we're going to get the data back. So, now we can update the appropriate result. And then we're going to run all of the listeners and clear them. And here is how it looks like on the client. So, we're going to import get poll and cast vote from poll.remote.

[00:08:07]Then we're going to spread cast vote on the form.

[00:08:10]Now, inside of an if block, we can say poll results.current, so it's reactive.

[00:08:15]And then we're going to loop over the poll result options and display them.

[00:08:20]So, here is how it looks like. Of course, my example is a bit more fancier.

[00:08:25]So, let's see. Is a hot dog a sandwich?

[00:08:29]Someone casted the first vote. Oh, but what is this? Someone else is connecting. Hmm, let's see what they think.

[00:08:37]It looks like a draw. Well, maybe you can tell me in the comments if a hot dog is a sandwich.

[00:08:44]So, here is how I've been using remote queries. I've been working on this cool project for rendering videos with code.

[00:08:56]In this example, I needed to show the rendering progress from the server, which can be easily done by using a live query.

[00:09:04]So, here I have get render progress, which just yields the render state.

[00:09:08]So, now I can render a video and get the progress stream from the server to the client.

[00:09:15]Awesome.

[00:09:17]Let's look at one more cool example of a live chat room. So, here I created a chat.remote file. We have an array of messages and listeners, the same as before.

[00:09:28]So, here we have a live query called get messages. We're going to yield the messages, and we're going to use the same promise.withresolvers trick as before.

[00:09:37]I also added a send message form remote function. So, we're going to validate the data and we're going to push the message. Then, we're going to invoke the listeners and clear them.

[00:09:48]So, let's see how this looks like in the client.

[00:09:51]So, here we import send message and get messages from chat.remote.

[00:09:56]So, we're going to initialize the messages and then we're going to spread send message on the form. And then, we're going to check for any messages by using messages.current.

[00:10:06]And then, we can loop over every message. As you can see, we can create chat experiences without using WebSockets. So, let's see what people are up to in the chat.

[00:10:23]Interesting.

[00:10:26]Thank you for watching until the end of the video. You can support my work by becoming a YouTube channel member or a Patreon supporter and have your name in the credits like fine people. Thank you for watching and I'll catch you in the next one. Peace.