Building a Cache with Upstash Redis in Next.js

In this video we'll cache expensive API calls in Redis within our getServerSideProps function.
---------- Course
Want to go deeper with Next.js? Join me in my Next Level Next.js course where over 29 videos and 8 hours of content we'll build a full application from start to finish. We use TypeScript, GraphQL, Prisma, Apollo, Mapbox, Firebase and lots more. courses.leighh...
---------- Links
Upstash - upstash.com/
Source Code - github.com/lei...
Starter Code - github.com/lei...
---------- Connect
Join this channel - / @leighhalliday
Join me on Discord - / discord

[@deathdefier45]

The only time I really learn important typescript/javascript information is when it's explained here. Thanks for this amazing content!

[@ji9306]

🔥🔥🔥🔥🔥🔥 Worked perfectly!

[@subhasarkar2420]

I am really lucky that i found this channel, man you always cover important topics that most of the channel just skip.

[@leighhalliday]

Glad you like them!

[@RawFatGod]

Awesome. I don't always watch the vids because I'm not into typescript yet, but it's always very useful and clear and easy to follow along. I actually built my first website off watching your headless CMS blog video.

[@jayshah5695]

kudos for Purchasing power parity!

[@76Freeman]

Thank you Leigh, very clear, straight to the point :)

[@leighhalliday]

Glad you enjoyed it Helio!

[@greensquarecinema]

Fantastic, thank you!!

[@atulsinghrajput9932]

loud and clear thanks for this amazing tutorial

[@jake1350]

This video is phenomenal. Thank you.

[@leighhalliday]

Thanks Jake!

[@fardeenpanjwani9724]

Great video, as usual!
BTW, you can use Promise for async functions that do not return anything :)

[@leighhalliday]

Haha I figured it out after shooting the video but by then it was too late! Thanks for the kind words!!

[@manosmenexis3160]

Always learning here. it's amazing!!! Thank you.

[@leighhalliday]

Me too my friend, me too!

[@dailymeow3283]

This api is great, thank you

[@leighhalliday]

Thanks daily meow :)

[@hbela1000]

Great video, thx.

[@exponent42]

love the way you teach

[@leighhalliday]

Thank you Lonan! Appreciate your support!

[@Colstonewall]

Thanks Leigh!!

[@leighhalliday]

Hope it helped!!

[@Colstonewall]

@@leighhalliday Of course it will help! Your stuff is always amazing, and more importantly, useful.

[@letonik72]

Спасибо за видео!

[@leighhalliday]

I had to use google translate for this hehe, but thank you!

[@trevorkelley5397]

you are so clutch

[@Norfeldt]

You are amazing!

[@leighhalliday]

Haha thanks Norfeldt! You're great too!

[@osamajbnoni]

Great video,
what's the point of using redis when we cache using vercel caching technique ?

[@Abdel-bw8qb]

Hey Thank you for the content ! Btw what is your vs code theme ?

[@flagoon]

Nice tutorial, but I think I might now understand something. We are using Redis DB hosted on upstash, does this mean each time we visit a page, we have to make a call to upstash to check if value is preset? How is it different from calling out PPP endpoint to check the value?

[@leighhalliday]

Hey! Nope, you're not missing anything. The thesis is that Redis will be faster than the external API... you'd have to make a decision for yourself whether it is worth it for your situation, but it was also just an example that you can cache any value to avoid "expensive" calculations on each page request. Imagine inside of the fetcher function it is making 10 API requests which each take 300ms... that is 3 seconds compared to maybe just 100ms to Redis and back.

[@leighhalliday]

I had one more thought to add, since it's a very valid point. With Redis we can control where it is located, so if we put Next.js and Redis in the same cloud region, latency becomes a minimal concern, and in our control. When dealing with an external API, the location is out of our control so latency could fluctuate and become more of an issue.

[@MrVoidfull]

@@leighhalliday I think in this specific case, using a local Redis setup would have been ideal. That being said, one of the main advantages of caching is the fact that you are not actually calling the external API locally. External APIs are often paid, and having a caching setup will save you huge amounts of money when done properly. Using a local setup for Redis would still be ideal in that case, but the main purpose is saving money in that case.

[@jeromealtariba7339]

hi, nickel! But I guess the fetcher should return a Promise not T (fetcher: () => Promise)

[@Norfeldt]

Have you tried the redis pubsub with nextJS?

[@leighhalliday]

I have not... I've always wondered how that would work since Next.js is typically hosted serverless???

[@Norfeldt]

@@leighhalliday I was hoping you knew. Been using firebase real-time database but have been curious to know if the real time experience could be archived with some clever redis

[@evranfurkan]

Thank you

[@leighhalliday]

You're very welcome!