Nuxt on the Edge

Rate this content
Bookmark

Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.

Sebastien Chopin
Sebastien Chopin
30 min
12 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. The speaker demonstrates creating a demo with a votes table, handling API requests, adding authentication, saving votes, and displaying results. The roadmap to a full stack Nuxt 3 with an edge-first experience is in progress. Copilot is a helpful tool for developers. Integrating SSO with GitHub and improving the developer experience are important considerations for Nuxt 3.

Available in Español

1. Introduction to Nuxt and the Edge

Short description:

Hello, everyone. I'm going to talk about Nuxt to the edge and what it means. Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, hooks system, file system router, auto-import, data fetching, middleware, plugins, layouts, transitions, server API, TypeScript, state management, the island component, the layer system, preprocessor for stylus and SAS, the module ecosystem, testing, processors, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network with about 200 nodes. It's quick, cheap, scalable, and affordable compared to serverless Lambda. Another option is dnodeploy.legon.app, which is open source.

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.

2. Introduction to Edge Functions

Short description:

Vercel Edge function, Netlify Edge function, Edge.io, StackPath, and more are recommended for checking out. It has limitations and is different from Node and browser. It mostly uses the V8 engine to analyze JavaScript code. Plugins were challenging in the past, but now people are more familiar with creating universal JavaScript plugins. The Edge Runtime has limitations but also advantages, making it a tradeoff.

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.

3. Database and Live Demo

Short description:

The total size is limited to 5 megabytes, but with Nitro and Next, we can mock and polyfill most of the Node and browser environment for production with AMP. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. A live demo will be shown using a simple Next 3 project with a Next space layer, utilities, and an SQLite database. The Drizzle tool will be used to specify tables.

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.

4. Creating Demo and Votes Table

Short description:

Let's make a small demo with this. CSS is boring. But in order to vote, I will need people to log in. I'm going to create my votes table. It has an ID and a user ID.

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.

5. Creating Vote Table and API Route

Short description:

User ID, user name, and final choice are required fields. An index is created to ensure each user can only vote once. An API route called vote.get is created to handle GET requests and retrieve the vote table data. The table is ordered by vote ID in descending order. Next Dev Tools will be used for development.

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.

6. Creating Post Request and Making API Call

Short description:

We have a route tab similar to Postman where we can directly call the API. To update the server DB table, we need to run a query. After creating the migration and starting the server, we can retrieve the votes. Now, let's create a post request to enable voting. We get the body and choice, and perform verification. Nitro provides a blazing fast HTTP server with auto-imported features. Let's make the post request now.

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.

7. Adding Authentication and User Session

Short description:

To add authentication, create an out.get request and use the magic method to retrieve the GitHub user. In Vue, use the user session to handle logged in users and provide a log out button. If logged in, display a welcome message with the user's login. Otherwise, call the API to log in with GitHub.

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.

8. Handling API Out and Saving Votes

Short description:

When clicking on API out, the user is redirected from GitHub and the user session is set. The vote is then saved in the database, and an error occurs if the vote is not unique.

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.

9. Updating Votes and Displaying Results

Short description:

I need to use onConflict to update the target user ID's choice. After updating, I can list the vote using useFetch for server-side rendering. To vote, I can call the post request directly on the client side. After refreshing, the vote count is updated and reactive. Before pushing the demo, I will include the total votes and the user's choice.

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.

10. Displaying User ID and Database Setup

Short description:

User ID, total, and user choice are displayed. PG is used for a better user experience. On mounted, a socket connection is simulated. The GitHub account is linked to Cloudflare for deployment. A D1 database is created and linked. The console is used for migrations.

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.

11. Cloudflare KV Demo and Voting

Short description:

I have my vote table. Going back to the deployment. I can show you another demo using Cloudflare KV. The code is open source. You can edit this page and it will automatically save on Cloudflare KV. If you want to try to vote, you can go to View-London.pages.dev. I will also try to vote. Let's see if some people have time to vote. We can have the votes from you guys in our database. Thank you very much.

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.

12. Roadmap to Full Stack Nuxt 3

Short description:

The roadmap to a full stack Nuxt 3 is being worked on, with a focus on an edge-first experience and compatibility with any environment. The goal is to eliminate the need for manual management and provide a seamless full stack experience. The target is to have something promising by the end of the year.

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.

13. Developers and Copilot

Short description:

Developers are good, and their tools make them even better. Copilot was impressive and helpful. It saves time and doesn't replace you. Demo a couple of times, train on what you want.

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.

QnA

Next Server Actions and Vision

Short description:

Any plans for Next Server Actions? I created an RFC on Next in 2019 about server functions. I see the advantage of server components and data-fetching on the component parts. I'd have to play and see the best developer experience before shipping. It's hard to answer how my vision for Next has changed. I try to get user experience and use it myself. I'm happy with the path we've taken and making the right mistakes. The process of integrating SSO was impressive. Thinking about Nuxt and the tools developers integrate with SSO was important.

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.

Developer Experience and SSO Integration

Short description:

How did you go about thinking about the developer experience and adding to it? Integrating SSO with GitHub has been made easy, but there is no official solution in Nuxt 3 yet. The speaker plans to do the integration and provide utils for creating custom API routes. Testing, application development, and refactoring are crucial for a good developer experience. Thank you for your time and applause to Sebastian.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)