Speed Up Your Apps with Cache Control
Vložit
- čas přidán 8. 09. 2024
- If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
This video is meant to serve as an introduction to caching API responses and load functions with SvelteKit & Redis. I'm aware that there is a lot more to caching than what I cover in this video, so if you are interested in learning more about different caching strategies, please let me know in the comments!
📁 Source Code: github.com/hun...
Free Redis Cloud Instance: app.redislabs....
ioredis: github.com/lui...
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
📃 Topics Covered:
- SvelteKit SSR
- SvelteKit Loading Data
- SvelteKIt Load Functions
- SvelteKit Data Fetching
- SvelteKit speed
- SvelteKit performance
- SvelteKit Server Load
- SvelteKit Cache
- SvelteKit Caching Data
- Caching SvelteKit
- SvelteKit Redis
- Redis SvelteKit
__________________________________________
(Affiliate links may be included in this description. If you choose to purchase a product from one of those links, I may receive a small commission at no cost to you. Thank you for supporting the channel!)
I'm aware that there is a lot more to caching than what I cover in this video, so if you have any tips, I'd love to hear them!
Related, but if anybody is looking for a simple caching solution without the overhead or dependency on redis, the `lru-cache` NPM package is a solid bet. 😄 Important note: it uses whatever memory is serving your Node app (within set limits) to cache most recently used values (i.e. it typically evicts "Least Recently Used" values at a set limit). And it was created by the creator of NPM.
@@Palundrium for sure a great option if you aren’t deploying the app to vercel or similar serverless platform!
I know your numbers arent that big, but I swear never stop making these, you're incredible at explaining concept, and the live demonstration is always on point ! Ill never stop supporting this channel, keep going man
Thank you! I don’t do it for the numbers, nor do I see myself stopping anytime soon 💯
Thank you so much for taking the extra time to make illustrations for the concepts in your videos.
It makes learning and implementing them feel so much more natural
You're very welcome!
finally a sveltekit redis tutorial! great video
Thank you!
Great explanation. Wasn't familiar with Redis' benefits before but this elucidated them well.
Really solid educator and high level screencast quality. You really help make topics easy to digest and actionable with practical examples with code. Thanks!
Thank you! That means a lot!
I've been wanting a video like this for months! Thank you so much Hunter!!
You’re welcome!!
Mate, this is excellent 👍. I am rebuilding an old Jekyll site into a sveltekit site. The site can hit 1million page loads in a day, fetching data from a headless CMS. Even though they say requests that hit the cached API are not counted it might be worth it to have redis in front of the graphql API.
So as a first time sveltekit project for me, your videos have been super useful!
Thank you, David! I'm glad to hear that!
Well done again! I REALLY appreciate the time you took to make the Excalidraw blackboard drawings; I think that is the best explanation for caching I've ever seen, and the drawings really help; to be able to show that visually is just wonderful! Thank you!! I learned something 😎😎!
That's amazing to hear! You're very welcome!
Awesome work! Thanks for explaining these concept so clear. 🙌
Thank you so much for this, we really need more. Cache is the most tricky to handle. Even I don't understand why Sveltekit throws error when I use 2 cacheControl header in 2 separate pages.
Dude you are a god
Thank you!
Another great vid Hunter, great stuff!
Thank you!
Good video. Very well explained 😁
Thank you, Simon!
I have been looking for this, thank you
You’re welcome!
Tq, but it would be great if you could make a full stack project-based video series covering these latest and greatest tools.
Great video.
Thank you, Saad!
Thanks for another great content, Hunter!
Looking forward to your course covering all the technologies you use (Svelte/SvelteKit, Typescript/ZOD, Supabase, TailwindCSS, Redis, Stripe, etc) to build a full stack app.
Is it coming any time soon? 😅
Thank you! Yes, soon enough!
@@Huntabyte 🙌🏼🙌🏼. Waiting for it!
Love your videos, thanks for making them! I'm working on a SvelteKit app where multiple routes have their own +page.server.ts with API fetching. Could you possibly explain how to cache across these routes so the API result is stored as the users moves between routes? Perhaps using stores and with/without cache-control?
You can use a layout load function for that!
A Part 2 of this great video can be a 3rd iteration where you can show cache stampede protection 😅
Quality content, keep it up
Thank you, will do!
tyvm
You're very welcome!
Thanks for the excellent videos. What about Vercel ISR? Do you have a tutorial about it ?
No but this seems like a good idea to make one!
just using the setHeaders, nothing from my load appears in the network, setting max=age has zero affect it always fetches.
How I would make SvelteKit revalidate the data in a set amount of time?
Great video
Do we need redis if we use cloudflare pages ?
I need to look into Cloudflare a bit more before I can provide an accurate answer, I know their technology is amazing, I just haven't had the time to learn!
Hi, I have a problem with 'vite dev' It will not load the page anymore after 5 seconds. it will load forever and nothing happens
Take a look at Upstash. They make serverless Redis stupid simple 👏
why not write data to servers disk, that would be faster than api call to redis to get the data
For Scenario 3 : Will it be more faster!?
(in your code ) when data get from the server
first- async function will send data to the client, after that
second - it will set/send data to redis
For the next user that requests that same dataset, yes!
@@Huntabyte no I said you sending redis first then client. what if you send client in a separate async function and then redis.
@@raihanhossain3423 Oh, yes, you could even do a promise.all() or something of that sort! Good catch!
Hello man, great video. At 14:17 we can see the or the server logged an error. I do often get that kind of error message where the parameters is replaced by something different, do you know how to fixed it?
make a video on how to make sveltekit webapp to a mobile app using capacitorjs or webview etc..
isn't it more straight forward to write :
redis.set(q, await res.text(),"EX",600);
why parsing + stringifying when you can just take the string. I hope the browser is keeping the text() value after json() have been called which means calling text() is cheap
Good point! I actually haven't tried that, but if you do and it works as expected, let me know!
sveltekit and firebase pleasee
Love the diagrams
Glad you do!