Stop Using JavaScript Fetch - Do This Instead!

if you want to get better at modern JavaScript Frameworks one thing you should stop doing is using fetch so often more than likely you don't need it near as much as you think you do let's see how you can replace fetch in modern JavaScript so first off I'm not just talking about using a separate package like axios instead of fetch people have their preferences let me know which one you prefer whether to use axios or fetch what I'm talking about is building your applications in a different way where we don't actually need to make API requests at all see that's something that we've been conditioned to over the past 10 or so years with Spa framework single page application Frameworks like react angular review spelt Etc and the way that works is we send a bunch of JavaScript to the browser and then we make API requests to the back end for every interaction that we need to do we want to load data we want to handle authentication we want to do all these things all of them require API requests but with modern JavaScript Frameworks we're actually looking to get away from making those API requests on on the front end and moving more of that logic to the back end running on the server now that doesn't mean that all of your API requests can be replaced some of those still have to happen but I think having to make API requests from the front end is much less necessary than you might think it is with these modern Frameworks and I actually made this exact same mistake myself and I want to share a code snippet with you and see if you have an idea of how we can improve this code now this is inside of an astro project and this is for my Astro course landing page at astr course. deev actually have a couple of free coupon codes for this course if you stick around for a few minutes but this is the code that I use to handle coupons on my landing page now I create coupons inside of podia which is where my course is handled but to be able to display these discounts inside of my page I have to be able to track them and display them using my own custom code so you can see on my site if I scroll down I can see that the student discount has been applied and it shows a 50% discount there so what is the problem with this code well in this case I'm making an API request to my back end I have this API endpoint inside of Astro Astro can do anything on the server that almost any other framework can do and what it does is it takes that coupon code it looks it up in the database and it returns that record from the database I'll show you what the database looks like in a second that's actually the key to where you can find this free coupon code if you're interested so then I get that response and I set it to the discount if there actually is one so if we get back a record from the backend API we set that as our discount which then gets sent to the browser and is displayed appropri really so knowing all of this what would you do differently take a second to think about it to change this code and not use this fetch request to an API backend all right there's one other big hint I want to give you and it is the fact that this project is configured to be in server mode so what this means is this code right here is all being run on the server so one more pause what would you do differently to change this code and not have to use fetch all right so the key here we're running code on the server that is making an API request to our own server which is very redundant so instead of making this API request we could just run the code that actually queries the database directly inside of this logic so let's go we'll actually just copy that snippet from the back end so we get a reference to our Zeta client which we will then use to be able to query that coupon in the database so we'll paste this in we'll need to get an import for The Zeta client and then we get this coupon record back again we're making direct API or direct database calls from inside this code and then we can set the discount to be the coupon record and I'll use optional chaining here in case we uh do have a record and then grab the discount property so now we're not having to make an external API request back to our own server we're just running code on the server and it's going to work the exact same now you may be worried about these environment variables being exposed specifically the API key but remember all of this code is being run on the server which means we're not at any risk of losing or giving away our API keys so let's just save this and let's re hresh this page it Scrolls us down it takes us to the exact same place and shows the exact same discount and then when we click buy now podia takes over and it actually shows the podia discount applied as well so all of that works the exact same now I mentioned I would show you how my database is set up and give you a hint at where you can find our CP cpon code for five free copies of the course so inside of Zeta which is my favorite database right now I've been using this for a lot of my projects I have a relationship between a coupon code and a discount so discount is just a number that I then convert to a percentage I then have the coupon code which I can query based off of what the user passes in so this is all I need inside of my database to be able to add coupons to my personal customize Astro landing page for my Astro course now if you were smart you may have paused when I show showed you all those coupon codes and may have guessed which one of those is going to give you 100% discount hint hint so there's only five of those available so the first five people that use use that discount code will get a free copy of the course if you're too late and that doesn't work for you instead you can use the student discount which you've also seen in this video so you can go back and find that as well so hopefully that gives you a good idea of a different way to approach modern applications built with modern JavaScript Frameworks and this is across the board for a lot of the different ones that you would be interested in spel kit remix nextjs all of these are buildingin tools that allow you to do more on the server and prioritize doing more on the server versus making these API API requests on the front end now you can't get rid of those completely but moving more of your calls to the back end is going to help speed up performance and take up take advantage of these modern Frameworks and modern tooling now if you're interested in learning more about Astro which is my favorite framework right now you have the full paid or free if you get the coupon course but I also have a free crash course on YouTube so if you want to learn more you can go and watch that and get an idea of what Astro is and what its capabilities are and maybe give you a better idea if it's something that you want to use in the meantime hope you enjoyed the video and I'll catch you next time

Channel: James Q Quick

Views: 12,280

Keywords: javascript fetch, javascript api requests, javascript server, server-side javascript, javascript frameworks, how to load data in javascript, web development, fetch vs axios

Id: pvBOSpzO1XM

Length: 6min 15sec (375 seconds)

Published: Tue Jan 23 2024