SvelteKit Has One Feature I Want in Nuxt

[00:00:00]Today, I'm going to show you two applications, SvelteKit and Nuxt 5.

[00:00:04]They're going to be running the exact same application. We're going to do a few little tests on each, and then I'm going to show you some things I like about both. So, let's jump in. So, here is the application that I created today.

[00:00:17]It's a task list. It times how long everything takes. And I'm also running this build locally. I built it for production. For example, this is the Nuxt 5 version, and I'll show you the code in a moment. And if I add a task, let's say 1 2 3 here, it takes uh two different requests here, one to get the task list, basically to refreshing the task list, and also it's posting to it.

[00:00:43]I don't know, 690 692 milliseconds for the post and 450 milliseconds for the get. A little bit over a second if you add those two together, maybe 1,100. And if we go to SvelteKit, and we try the same thing, 1 2 3, we can see it actually has one request that it it did. And this is using the new remote experimental feature in SvelteKit, which I'll show you.

[00:01:08]It's about the same, about 11:02 for each, but it's just one request. So, we don't really have too much uh difference between the the two. If I click refresh here, it takes about 448 milliseconds.

[00:01:22]If I go back to the Nuxt 5 version and I do a refresh, it's doing 447. So, very very similar numbers in in both. I ran this quite a few times to see if I could see a difference. I would say SvelteKit is a little bit faster when I ran this many times, but let me know in the comments what you found when we running between SvelteKit and Nuxt 5. Also, just to keep in mind, I am running the experimental version of Nuxt 5. If you go to the release notes here, you can see you have to set this future compatibility version five in it. It does have a nice upgrade doc here that talks about what what you need to do if you need to upgrade to next five. It seems like most of the fixes or most of the updates is the underlying structure of it using a new version of Nitro and a new version of Beat. I kind of want to show you this graphic here. If you're kind of thinking about how SvelteKit does things versus Knux. Traditionally people API routes in Knux. While in SvelteKit we use these either a server endpoint which is similar and basically the same thing as an API route in Knux. But they also have this new thing called remote, the SvelteKit remote which is like a transport which is not a public endpoint that someone can hit, but you can call it similar to like server actions you can do in TanStack start or in next which I thought is really interesting.

[00:02:53]Let me show you the code for that. So here is my SvelteKit app and if I go into the source, I can go into routes and you can see here's the page route that I had before. And by the way, I'm using Kiro as my IDE and also my agent code editor.

[00:03:09]And if I look inside here, I have this task.remote.ts.

[00:03:12]So this is an experimental feature. You can turn it on inside SvelteKit by putting this experimental remote functions true.

[00:03:20]And this essentially this is an endpoint that isn't publicly accessible. It's basically created when it's called, so no one else can access it. In this case, I'm running a query and a query to a task store to add it into the list of tasks.

[00:03:37]And it has this interesting way you can do these refreshes in here. So this get task is this query here and has this kind of interesting pattern. So you execute this refresh in the server and it sends the updated query value back in the command response in one browser request. You can see in that demo I was showing you that show you before it was actually one request. You not have to doing a refresh and the submit it.

[00:03:59]It also has uh valley bot which you can do all this validation sort of like Zod that you can do elsewhere. If we look at the page SvelteKit, I think this is really interesting here. So, if I look at the code uh I have this task. It's almost like actions. You can also do SvelteKit actions, but this is a little bit different cuz we're using this experimental remote and we have add tasks here.

[00:04:24]And if we have if we look into our submit our on submit it on submits on the submit task and the submit task this is just something that we can use to help do some timing and check the timing, but we await this add task here and we send in this request which is this object with this title and all this information into it. And this add task goes to that add tasks remote file that I showed you before which it then adds it into the task store. The way this works, there's almost a subscription. So, if I scroll all the way down from the HTML, I have this at render dashboard await tasks.

[00:05:01]And this essentially is a subscription that runs and if it sees anything on the server side changes like we had with this refresh here then the task lists the tasks get updated automatically.

[00:05:16]So, a little bit different than maybe running a fetch to an API I route and then grabbing the information back or running another query to query the information to put on your page. It's almost like a subscription that you're adding in here and you can do this. So, nice thing too is this is running on the server side so I can have all my environmental variables and I like this approach. It's a little just the first look at it I thought it was a little complicated, but it it definitely makes sense to me. I think if I'm looking at this compared to TanStack start, I think I like the TanStack start actions a little bit better, the service server actions a little bit better than these. Here, I've shown this before, but here in view in Nuxt, uh I have the compatibility vision version 5, that adds in the new Nitro 3 and some of the latest and greatest for Nuxt. And then I'm just doing a simple server route. So, the convention is you put in.get.ts for gets and posts in here.

[00:06:15]And then I'm just saving the information locally uh and then sending the information back. In fact, there's this add task, which is just a util that saves the mutation. And then the way you call that is as you can imagine, just through a dollar sign fetch right here.

[00:06:34]Right here. I'm just doing the fetch to the mutation that changes it up there.

[00:06:39]And then when it's done, I'm doing this refresh here.

[00:06:42]And this is using this use fetch. So, this is a composable that runs soon as the page loads. Uh and then we also have this nice refresh. So, this refresh can go ahead and run it anytime and it'll run a call to the back end to this API task, the server route that I created. And the snapshot here, and here you can see if you do the V4 task, this is the snapshot. There's a tasks in it and we're just going over the tasks one by one to show all the information at. So, definitely different ways of thinking about this.

[00:07:13]So, here is the documentation for SvelteKit remote functions.

[00:07:17]They do SvelteKit also has and I didn't show in this demo, you can do form actions sort of like you can do with actions that in in the React world or Next world.

[00:07:28]However, these actions are still, if it's a.server.ts, this is essentially the same as a API route. So, this is still publicly accessible anywhere, but you can add it in as an action and then call it from your client components. I still really like I really like this idea of having actions that aren't publicly available that you can call from anywhere. You can put secrets in. I think it's just really nice. And I think this remote function it's available since 2.2.7. I hope they make it a not experimental and make it permanent, but we'll see. Let me know what you think between these two frameworks. I'm still going to stick with Nuxt. I just I love the patterns, the API route API routes pattern. I do miss these other frameworks that have these nice server actions.

[00:08:19]I hope that Nuxt adds it into the a future update or at least goes beyond the server components they have right now. Let me know what you think below.

[00:08:26]Thanks.