Nuxt on the Edge

Hello, everyone. I'm very glad to be here. I won't have so much time, so I will dive directly. I'm going to talk about Nuxt to the edge and what it means.

I'm at Inoox, also known as Sebastian Chopin, which is my real name. I am CEO at Nuxt Labs, and we do meet things, such as consulting and audits. It's also good if you want to migrate from Nuxt 2 to Nuxt 3. We also developed Volta, which is a project management built on top of GitHub and helped us develop Nuxt 3 and make it a stable version. And recently, Nuxt Studio is using Nuxt and Nuxt Content with Live Edition.

Nuxt is a web framework to create full stack view application. So, the question you asked to Daniel about the full stack experience is definitely on our roadmap, but we had to stabilize the framework, make it a good framework for front-end development before diving into the full stack experience. We also have many features. In case you don't know Nuxt, we have server-side rendering, client-side rendering, static site generation, edge site rendering, hooks system, file system router, auto-import, if you're lazy like me. Data fetching, middleware, plugins, layouts, transitions, server API, TypeScript, state management. We have a default state management, but obviously, you can use PNU of UX. We have the island component which is experimental but very promising regarding the server components. The layer system, I don't know if some of you have used layers internally. A few people, basically it's a Nuxt app that you can push on NPM and you can extend. We have preprocessor for stylus, SAS, the module ecosystem, as you have heard, testing, processors and many other features that I won't show you today.

The Edge, who already deployed to the Edge? One, two, okay. Five people out of 10 people. It's a limited environment and it's running on CDN nodes. It's been pushed by Cloudflare workers a few years ago and, basically, when you deploy your code, it's replicated on the network. Here, it's Cloudflare network and there are about 200 nodes. It renders quickly your code and it's very cheap to host. It runs in miniseconds from your end user whenever they are in the world. You have zero minisecond call starts, no server to maintain, it's scale automatically, and it's affordable compared to, it's not a scam, but the serverless Lambda which can cost you a lot of money. Here, we're talking about 50 cents per million of requests and they have a free tier for 100,000 requests per month. But Cloudflare worker is not the only one. Today, we have dnodeploy.legon.app, which is open source as well.

I highly recommend you to check out Vercel Edge function based on Cloudflare, Netlify Edge function, Edge.io, StackPath and many more are coming. But it has limitation. It's different than Node and browser. It's mostly using the V8 engine to analyze your JavaScript code. Like, six years ago, you could not use Window on Node. And you cannot use the file system in the browser. When you were working on plugins, it was a hard experience. But today, people are more used to creating universal JavaScript plugins. It's similar for the Edge Runtime. You have more limitation, but you have more advantage. It's a tradeoff.

And right now, the total size is limited to 5 megabytes. But thanks to Nitro and Next, we mock and polyfill and most of the Node and browser environment we can do for production with AMP, part of the NGS community. And we produce an optimized output, like I say, about 3 megabytes for the total vendor.

We also see database coming to the Edge based mostly on replicas and HTTP proxy. Escalate from Cloudflare D1 and the recent one, Torso. Postgre with Neon. Versel on Neon, Superbase, even though they offer more than just Postgre. MySQL with plan scale, HyperDB for hybrid approach, KV with redis and Cloudflare storage.

I'm going to deep dive because we don't have too much time. I'm trying to make a live demo for you. It's not as impressive as making Next live. I'm jealous of Daniel. What I've done is I have a simple Next 3 project. Can everyone see the screen or should I zoom? Okay. And I have a Next space layer, which is basically an NPM package. And it's a simple Next application. So, I added some utilities such as user session. And some server utilities I can use on my routes. And it provides me an SQLite database in development. And I can use Drizzle to specify tables.

So, let's enable it. Run the server. What it will do, it will automatically create a table. A Drizzle config. Telling me that I can Drizzle Kit generate SQLite from a migration. And let's see how it looks like. So, what I want to do is, I have my page. This is not easy to live code on that. So, coffee or tea. I don't know if you really prefer tea or coffee.

Let's make a small demo with this. CSS is boring. I'm sorry. But I would have vote coffee. Coffee. That's not coffee. But that would work. And we'll have tea here. Two button. Let's make it like this. I usually code faster. Don't worry. And let's make our button a bit nicer. P4 border. If you think it can be nicer, don't hesitate to shout.

But in order to vote, I will need people to log in. Because I don't want anyone to vote easily. So what I'm going to do is first have my vote function with thank you. My choice. This is Copilot, by the way. Otherwise I don't know how to code. I'm going to create my votes table. So in order to do this, I'm exporting votes table. Let's name it votes. It has an ID which is an integer. I need to give the column name which is similar. And primary key. Then what I want to have is the user ID. It's also an integer. No, integer.

User ID. And it's not null. Next I will need the user name. Not null as well. And the final choice which is also a text. Not null.

One thing I want to precise on my table is I can only vote once. So for this I'm going to create an index. So I'm getting this vote table here. And I can return my indexes. So, user ID index. I should have this unique index here. It's a bit boring. I'm sorry about this. But we are getting close. And on votes.user ID. That's nice.

So let's create an API route. If you use this nexter extension, you can create a new API route directly. Let's call it vote.get. By adding this.get suffix, I'm only limiting to the get request. So I should be able to return use DB. And I have access to select. So next space layer will automatically admin this table object. And I can see my vote table, which is typed. I will order by this tables.vote.ID because I want the last one first and return all. I will need to import this. I will find a way to import this, but not right now. Like I say, I'm lazy. So I'm going to use the Next Dev Tools.

We have a I don't know if you have seen several route tab. So if I click here, it's similar to Postman, and I can directly call my API. So it says no data found. So what I need to do is every time I change server DB table, I need to run this query.

So you created the migration, we're starting my server, and I can get the votes. Nice. But I still need to be able to vote. So I'm going to create a post request. Let's make it async. I'm getting the body at first. Wait. Read body. Let's get the choice. Like this. Body or empty. And let's make some verification because I don't know here if everyone will play the game by clicking or making API requests. Yeah. I saw you. So, if it doesn't include. Return.

So, in Nitro, we have this H3. H3 is the HTTP server. We have under the hood. Which is blazing fast. And we have everything that is auto imported. Thanks to TypeScript, we can have everything. Bad choice. Choose between coffee or tea. So, let's make our post request now. Body.

Send it. Choice. Tea. Okay. It works.

What we want to have now is authentication. So, in order to add authentication, I'm going to create an out.get request. Endpoint. And for this, I will say user, equal await. It's a magic method. In order to work, this comes from the layer. I simply need to create an application and add this environment variable in my dot auth. And then, I can send back my GitHub user. GitHub user like this.

Going back to Vue. The most interesting part. I can say use user session. Inside, I will have a logged in and user and clear. Clear is a method to log out the users. What I can do is here. All right. Now. Now, come on. So, if I'm logged in, I will say welcome user dot login. Because it's an object from GitHub. And I will have a button that's clear. Let's make it underline. To log out the user. Otherwise, let's call API slash out. Log in with GitHub to out.

Some CSS. Okay. So, what happen now when I click on API out? I'm still on slash API slash out. I've been redirected from GitHub. I have the code here. Five minutes. All right.

So, it's disturbing. Going back to the out route, what I want to have is if this is from the library, but if I don't have any GitHub user, it means I've been redirected to GitHub. The first time I hit that route. Then it redirects me to this route. I have my GitHub user. I'm going to set the user session by giving the GitHub user and return, send, redirect to the home page. Obviously, if I refresh. I don't mind. Let's try again on this. Log in. Then I do have my user. If I take a look at my application, the value of the cookie is actually saved and created, and this is why we do have this environment variable to unseal the session on the server side, but it actually has everything I set inside this object.

So, what I need to do here is I want to make sure that it cannot vote if it's not authenticated. So, I can get the session by making requireUserSession, and now what I want is actually saving the vote in my database. So, const vote useDB.insert tableVote.value. So, I get user ID which is my session.user.id. So, user ID, user name, session.user.login, and the choice. I want it to return the object when inserting the row and getting back to me. And then I can send back the vote. Let's see how it looked like. Coffee. Okay. If I try to save it again, I'm getting this unique constraint error because it cannot save this unique index.

I need to use this onConflict to update. So, the target is actually the user ID. And I want to set the choice. Let's try again. It doesn't create any new entry, but it's updating my information on the table, on the entry, and I can have my list of votes. That looks all right, for the API side.

Let's list the vote now. So, I'm getting the vote refresh from useFetch. I'm going to use useFetch because when you do server-side rendering and you want to get the data from a page, useFetch will do it during the server-side, store the data in the payload, so during hydration, we don't make any API call but directly get it from the payload injected in the HTML, saving one HTTP request. So here, let's display our vote. Yeah. That'll do the work. I prefer emoji though. Emoji. Okay. I do have my votes.

So now what I want to do is to vote. We did it with the DevTools. I don't need to use fetch because it's an action which is done on client side. I can call vote. It's a post request and the body. I don't need to JSON stringify because dollar fetch will do it for me. Once done, I will simply refresh. I will make the API call again. Update this reactive value. And it's now reactive. What I want before pushing my demo is to have the total of votes. Otherwise, it's quite useless. I will first have the user choice. Let's say it works.

User ID. Const total. Total T. Let's display them here. Total coffee. Total tea.

Okay. And lastly, because I'm picky, I would like to have PG to give a nice user experience. So you know what you have selected without looking at the activity.

Does that work? Class. User choice. User choice. Yeah. One minute. Let's say it's fine for this. On mounted. Let's pretend we have a socket connection, but not like this. Set interval. Normally you should keep the interval. Clear it when you unmount. But let's say I don't have time right now. Push time. So, on Cloudflare. I linked this GitHub account that I just pushed right now. It's going to deploy. On my settings, I created a D1 database. That I linked here. I don't have any tables right now. So, what I can do is use the console. Go in my migration.

Take this first statement. Later I think of a way to automate this. But so far, that's the only way. Migration or obtain any way. So, it's not that bad to do it manually.

So, I have my vote table. Going back to the deployment. Potentially I can keep that during the Q&A. I don't know about the time.

What I can do is show you another demo I've done using Cloudflare KV. The code is open source as well. You can edit this page. It will automatically save on Cloudflare KV. And if you refresh it'll automatically have the data. And also have fun to generate this image. If you change the title. Using our data, we have another demo using to-dos. Upload complete. Refresh. If you want to try to vote, you can go to View-London.pages.dev.

I will also try to vote. I'm in London, so I will say T. Let's see if some people have time to vote. Yes, it's working. We can have in our database the votes from you guys. So thank you very much. They have backup, Cloudflare have backup and more. But so far the demo is here. Its open source. I also have other demos that I will link in the read me.

And thank you very much. That was impressive. Wow, oh my gosh. I thought I could like it but you took it to a whole another level. So many cool questions as well coming in. But the first one is about nuxt, you work on nuxt. How does the roadmap to a full stack nuxt 3 look like? How close is it currently? Is it something you're spending a lot of time working on? I see that smile. Well, I've been experimenting for months now. I want to find a way that the full stack experience will be edge first. So you won't have to manage anything. Like when you static generate, you don't have to worry. I want something that can work on any environment. And I have to think of the full stack experience even though if you are statically generating your apps. But I would say, at the end of the year, we may have something promising.

Nice. One thing also I found, at least for me personally as a developer, is developers are good, and their tools make them even better. The way you were using Copilot was so impressive as well. Just the way it was helping you. Are you a big fan of Copilot? This is another question that came in. It's quite useful, I have to say. Maybe because I repeated the demo five times. It got some of what I was trying to do, but it saves you time. It doesn't replace you, but it saves you time, so I do like it. That's a smart thing, actually. Do the demo a couple of times, train a bit on what you want, and then... No, no, it was the first time. Nice, nice.

We've got another question that comes in. Any plans for anything like Next Server Actions? Actually, I created an RFC on Next, I think it was 2019, about server functions. I'm still in between. I see the advantage of server components. We do have data-fetching on the component parts. It has to be carefully crafted. So far, you can make API routes in Next, even though when you do server-side rendering, we directly call that function instead of making an API request. I'd have to play and see what the best developer experience is, before shipping stuff like this.

Nice, nice. And think back, because you've been working on Next for a while now, so thinking back to kind of when you started and your vision for Next, how has that changed since you started working on it? It's hard to answer, honestly. Obviously, when you... When you're inside the framework and you're answering the issues, it's another mindset that when you're actually using it... So, I'm trying to do both. Getting the user experience, because they can have very good ideas of giving you to some new paths. And using it is also important, because if you care about developer experience, you have also to taste what the current developer experience is.

If you could go back to yourself when you wrote your first line of code for Nuxt and give that version of yourself one piece of advice for the road ahead? What would it have been about the progress and the way Nuxt has changed? I think I won't say anything. Big question. Sorry, I just threw it up on there as well. I'm very happy with the path we have done. We always refactor the code anywhere at one point. I think we made the right mistake to fix them later. That's amazing. Making the right mistakes as well. And one thing which I was super impressed is SSO in 3 minutes as well. That was awesome. A big shout out to you as well. And that whole process of not just going to build. Like often times when people do demos, you build a small thing that's not something that's actually going to work in production at scale. But that was like that. What was that process in terms of especially not just integrating it, but the whole experience of thinking about Nuxt and thinking about all the tools that developers are going to integrate with SSO.

I'm kind of like ad-libbing on this question here. But how did you go about thinking about that developer experience and adding to it? I'm not sure I understood the question. My question was you made it very, very easy to integrate SSO with GitHub. And then we saw you do that. And is that something that has been intentional and by design and something that you aim to have in Nuxt and all the tools that support Nuxt as well?

Well, it's not that hard in a way to integrate. But we still don't have an official solution in Nuxt 3 so far. And that's why I'm planning to do the integration myself, because it can be a nightmare to have a basic HOT system. So I want to first give the utils. So you can have the freedom to create your own API routes how you want, but keep using the utils that save you time. It's a long process. And I think that's why we still don't have an official HOT solution. Testing, making an application and refactoring I think is the key for good developer experience.

Awesome. Thank you so much for your time. We really appreciate you. Apparently, one of the questions right now is who broke the app. So I think you're going to grab your computer and see if you can fix it. But everyone give one more massive round of applause to Sebastian.