Globally Fast Applications with Cloudflare Hyperdrive and PlanetScale

If your application runs on Cloudflare workers, it's served fast all around the world. And if you need a MySQL or Postgress database, you obviously use planet scale. But the problem with serving users at a global scale or planet scale is that some users will inevitably suffer from latency. And that's just physics. You can't bring your database closer to all your users. But what if you could? You can with hyperdrive. Let me show you a demo first and then we'll build it ourselves. So here I have a nextjs application. It's at the coffeecluster.com and it's just a shop that has a couple coffees and you can browse through them. Second page, third page. It has no caching because it's a demo, but you can see that every request is logged and it shows you how long it takes. It's about a second. And this is because the database is in in Europe and I'm in the US. But now, what if I turn on hyperdrive? Let's do the same thing. Whoa, that's crazy. 133 milliseconds. Let's go back to beans. [clears throat] It feels almost instantaneous. So we can see it's a 93% improvement with hyperdrive. This is not on planet scale. We'll see shortly. They will handle the query in under a millisecond. But it's just latency. This is where hyperdrive is going to help us out. Let's start by creating a planet skill database. We'll be using their $5 plan because it's really hard to beat that price. So I'm going to open up plan and I'm going to say new database. We'll create a new database and again the location I'll choose Europe. I'll choose Europe because I'm in the US to kind of mimic that latency. So we'll call this coffee cluster demo and it will be a single node because that's the $5 plan. We'll use uh EBS and the best price to performance ratio is ARM 64. So, we'll click this one and we'll create the database. Now, creating this database is really quick, but initializing it might take uh a minute or so. Okay, it's done. I can connect to it now. I'm going to create a new role and let's call this uh video so I won't confuse it with any other roles. It's going to have read all data because I wanted to have select queries and I'm going to also select write all data because I want to be able to insert things. And then finally I'm going to click Postgress and that's only because we'll be using drizzle migrations and drizzle migrations create a schema which is why you need the postgress roll. So I'm going to create the roll. It's very quick and here's our roll and luckily plan was awesome and will tell me that if I use drizzle I can use this. Actually before you we're going to use a direct connection. If you're not using Hyperdrive, you want to use PG Bouncer because they will do the connection pooling. But since we're using Hyperdrive, Cloudflare will do the connection pooling. So, we'll click direct. We don't need to follow these instructions cuz I've already have a I already have a repo. But we need this database URL here. So, let's copy that. And now, it's time to open up my editor. And then in ENV, I'm going to paste this database URL. Okay, let's save that. And if I do pmppm rundev now, we'll run the application, but it's going to throw an error because the database cannot find the coffee beans table. So that's expected. Let's go run the migrations. Let me show you the migrations first. We have a simple migration here that creates coffee beans and suppliers. So I'm going to use npx drizzle kit migrate which will use that database URL to populate the database. Great. So now if I run pmppm rendev it will work but it won't have any data. So let me refresh. Great. No data. In order to do so I have a little seed script that I'm going to call. It's called mpx tsx seed. And this will just load I think 60 brew 72 varieties of beans as you can see. Now let me refresh. Okay. So this is our local application that connects to our remote planet skill service. So as you will see clicking on these beans will be somewhat slow. Each click is about a second. Let's say a little over a second. And it should be a little better after we deploy this. So in order to deploy this uh we need to first set the secret right so if you remember can actually probably still use this thing here this this value we need so I'm going to go here copy this wrangler secret put [snorts] and this is going to be database URL and I'm going to paste the URL let's now deploy it run deploy Okay, it is now available at this URL, the coffee cluster demo. So, let's open it up here. Okay, here we go. So, this is deployed to Cloudflare. One thing that's cool is in a couple minutes we created a planet database and we deployed it to Cloudflare. That's a very seamless experience. It should be a little faster. It's about a second still. is deployed and our database is far from our application. So, we're going to see some latency. But before we continue, I want to show you that this is 1.2 seconds latency. But if we go to our insights, right, you can see that the query latency here is 1 millisecond. Let's see if I can do like the last hour, right? They're all Look at this. Under a millisecond. This is crazy. Like 0.2 milliseconds. I want to just make sure that we we know that this latency is not planet scale. That's just latency, connection latency. What we know, we know planet scale is fast. We know our connection takes a long time to be established. That's at hyperdrive. And there's two ways of doing it. We can go through the planet skill dashboard. Right here's the the integration. But after after you've gone through this connection, you actually cannot do this again. So I kept it open. If you close it, you can actually connect through Cloudflare. But for the purpose of this video, I'm going through Planet Scale. So I'm going to click Cloudflare. And I'm going to go select my employee account. And I'm going to create a hyperdrive configuration. Here I see it immediately created a planet skill coffee cluster demo. And then all I need to add is this hyperdrive [snorts] binding to Wrangler.json. I'm going to open up my editor and I'm going to open my Wrangler and I say, do I have a hyperdrive yet? No, not yet. So, under observability, I'm going to paste hyperdrive and then close this and then do this and this. Okay, so now I added hyperdrive. The next thing that I need to do is I'll do this in the split tab is to pmpp cf type gen. This is going to create the types for me. And now you will see a hyperdrive type is added. Why is this important? If I open up my index.ts for the database, see how here we have the connection string process env database URL. Well, we want to replace this with import get cloudfare context from openj open next and then instead of process env we say okay give me the env from get cloudflare context and then we have the env. And now we can say connection string use env.hyperdrive connection string. So this will use the hyperdrive connection string. This is going to work pretty well. But locally you want to set another environment variable which is in the env cloudflare hyperdrive local connections to your hyperdrive. It's a very long environment variable but setting this will make sure that you can run locally and still use that hyper the hyperdrive binding which will then just not use any hyperdrive at all. It will connect to planet scale. Copy this thing here and I'm going to paste it. Okay, so dev should still work. If I do pmpp rundev, here we go. So this is still working locally. No hyperdrive is in place, but it uses the hyperdrive binding. Now we want to publish this. But because I'm using nextjs, it's going to build these pages first. And then it's going to tell me, hey, I can't access the binding here. I'll just show you. Say pam run build. It's going to build it. It's going to get this. Hey, get Cloudfare context be called in sync mode. And that's true. We can just do something very simple for this case. Okay, just for the sake of this video, inside of index, what I'm going to do is I'm going to say let connection string and I'm going to try this first And if that doesn't work, if I catch an unknown error, then we can fall back to process. database URL. Uh let's get this actually here. Okay. So what this does is it will try accessing hyperdrive either in the build script or in a build environment. And if that doesn't work, then just use this instead. So now I'm going to use pmppm run deploy and it fails. Why does it fail? Ah because it's still trying to access this string, right? So what I need to do is say export Cloudflare hyperdrive. Boom. Boom. Now if I do deploy Okay, so I have it here. Let's open this up. It should load with hyperdrive now. Look at this. Before it was over a second. Now it's 200 millconds or 100 milliseconds, right? And let's go through the pageionation. Now it's just much faster. Now let's see, did we actually turn on caching? So I'm going to go to hyperdrive. This is in my dashboard. And I think this one was called demo. And if I go to settings, it says caching disabled. Now let me let's see what happens if I enable caching. And each query can be cached for 60 seconds. And then after 60 seconds, if someone requested, then we revalidate in the 15 seconds after, right? So people can get still data for about 75 seconds. Let's save. So, we just had this six requests about 270 millconds. Refresh. Let's click it again. Okay. Run it once. Run it another time. 30 milliseconds in cache. Boom. 30 millconds in cache. All right. So, one 2 3. Okay. Now it's cached. One, two. So, let's start from the beginning. This is 100 millisecond with cache. Let me refresh. Click. Boom. Seven. Eight. Right. This is This is crazy. Look at this. Oops. That was a new one. Two. Three. So, it's now only 8 millconds to the database and the rest of that is request latency. Isn't that amazing? Isn't that crazy? We just sped up from like over you know what was it 600 millconds or a second to 50 milliseconds with cache requests. No radius no mached no varnish you know this is just hyperdrive. So in a very short period what did we actually build? Well, we took a standard NexJS application. Uh, we added Planet Scale and within a few lines of extra code, we added hyperdrive and we turned our regional database into a globally distributed one. We dropped latency to 50 milliseconds with caching and about 200 without. All on Planet Skills $5 plan and Cloudflare's free plan. Let us know what you like to see in the next video. Should we go a little deeper on hyperdrive? Should we explain why this happens? Should we do something different? Danstack or spelt? Let us know what you want to see and we'll get on it. Have a nice day.