Yup. I don’t think I’ve ever gone back in a video to catch a sponsorship spot before, but here we are. Props to the whoever put that together, and tbh I have been thoroughly enjoying non-channel-sponsored Theo
Where is the ad? I watched the video very quickly but cant seem to find it? I am using payload already and it is such a great dev experience. I love it.
I fr for the first time actually paused a video, and went to checkout the sponsor. Lucky enough, I may be landing a project where I have to build a CMS. This would make my job so much easier.
As a junior web dev, thank you very much for this types of videos. Your video about 'use client' saved me from leaked credentials and this video helped to highlight some problems that I didn`t even know existed.
Implementing a memcached wrapper around SQL servers when writing perl programs was something I did, something we all did, over two decades ago. Nice to see the future finally showing up for serverless.
Yes but when you have to go so deep on the knowledges you need to have about a platform/framework to avoid having a gigantic bill then there's something's wrong anyway. Or then it's a product built only for top tiers developers who can deep dive into the framework.
@@Theprouteu Using a managed solution has a learning curve, but is not that complicated if you read the docs, and if you already know about servers, image optimization, lambda functions or how CDNs work, and you get that knowledge within a couple of years in active web development.
@@paca3107 It's a choice... experimented developers who know how to spin off a Linux server, also use platforms like Vercel for the convenience, because it is an actual benefit of these platforms. But yeah some, inexperienced or irresponsible developers come to these platforms like they know everything in the world, many of them don't even read the docs, they took things for granted and they good a reality check when they receive a big bill due to its irresponsibility, lack of experience or lack of research about how the platform works and how the platforms charges for compute, or other stuff.
Your boy here was the one pushing them for YEARS. He is the REASON the developer community is in the state is right now (thinking you need to pay 600% premiums for infrastructure you can build yourself very easily)
@@chilli943 vercel made it easy for Developers to make everyone feel like a great developer. But the truth is they have to make money somehow. This channel is not really for beginners most of us read the pricing models from the start. You can’t blame Theo for people not reading how vercel charges. There’s a lot of optimizations vercel does. I personally don’t use them because I’m a laravel guy but we can’t deny their effort. If you use all the optimizations vercel does then you have to know that don’t come free. Always remember no one works for free
I don't like your videos when they're not like this one. I think you have a very wide knowledge on how the front end ecosphere works, and THIS is the kind of videos where your knowledge shines. Props, great video theo.
Wow this video was one of the most helpful ones, I have ever watched. I've found out about most of the stuff on my own over the years, but here is so much knowledge in 27 mins. Could have saved me a lot of headaches over the years
- Delete Public Folder - use Image component less - Not every image needs to optimize - Make less db queries, optimize them - Use caching - Use Static pages more
Don't use vercel or aws or google cloud or azure, get dedicated servers. Simple as that and job done, if you want to pay even less then get unmanaged servers. Right now it's easy to find unlimited bandwidth 1Gb/s or 10Gb/s. Also you can get multiple servers in case you need them to create a load balancer. That's the right way to start your business. Start small and scale based on needs.
Theo before leaving: “Vercel has no control over what I talk about” After leaving: “That means I can talk about things they might not have wanted me to talk about in the past” 🧐🧐
I thought the same. There‘s a loophole here though. It’s like lying, is not saying sth. lying? Anyway, I get what he means by that. It always makes a difference when there’s a business relation.
@@frowin2 Tbf I did appreciate Theo’s philosophy of taking sponsors he believed in, and I don’t actually think he was a Vercel shill. I just thought this was funny
I appreciate these tips even though I plan on deploying on a VPS, they are just good best practises and I hope people don't skip this video thinking it doesn't apply to them
Amazing contents! I instantly went to investigate my /public folder. I found that we have OG imagaes for social media which sit around 120-160KB. I suppose it should not be a problem to host these outside Vercel CDN. But I also found that since we are generating favicons for mobile platforms, some of our android favicons are also in the 120KB range. I would definitely want the regular small sized favicons that browsers use to be loaded fast to not impede first load, but I'm wondering if we have these high resolution favicons specified in the sitemanifest whether they will impede the load time if I hosted them out of a slower provider?
- Avoid placing large assets in the public directory to save on CDN costs - Use external storage services like S3, R2, or UploadThing for large files - Limit the paths allowed in image optimization to prevent excessive costs - Run database queries concurrently to reduce blocking and minimize compute time - Use caching mechanisms to reduce redundant API calls and database queries - Ensure mostly static pages are generated as static HTML to avoid dynamic costs - Monitor image optimization costs on Vercel, especially for high-volume projects - Consider alternative analytics services to avoid high Vercel analytics fees
Question: why do people do any of this shit instead of just paying for a php server or something? This seems like a ridiculously complex solution for problems that were already solved 20 years ago
Thanks, that was a super useful video. I am just getting started with NextJS and am pretty nervous about hosting with Vercel. Are there logs that show bottlenecks with performance that I should be monitoring?
the thing about parallel db queries: from one side each particular request indeed takes too long and its totally dev mistake, but from another putting a node engine code with such easy-to-use "concurrency" into an environment, where you spin up a dedicated lambda instance for each request (instead of re-using already running and idle instances) is simply a serverless SCAM that aws started a while ago and everybody got along with it
Looks like I am watching old theo One of the very first videos that I watched was you explaining even though TypeScript is slow still why it makes sense to make apis in it and when to bring in go and rust.
Quick question on 15:36 part of serverless functions duration, what if we need to merge data from a external API and a CMS for say. CMS queries are cached but the external APIs are not and as we need specific data from CMS then it needs to depends on the response of API. How do you think you’ll tackle that kind of problem?
Hey, I believe I may have noticed a minor issue in your unstable_cache() demo. You used "posts" as the cache key, but then used the same value in the revalidateTag() call. The issue is that the cache key isn't used for revalidation; it's the tags that matter. You need to specify "posts" as a tag instead for revalidateTag() to work correctly as far as I'm aware.
Optimizing Images can be done with single lambda running sharp on it . and connected to cloud front params (like w=200&h=200) isn't that hard to make your own.
Looking at my usage, the "edge requests" is what often goes over the free tier limit. I wish there was a way to see a breakdown of which paths are the hottest to optimise.
it's not Vercel is too risky, It's Vercel makes entry so easy for new devs and somehow they market towards many so called "founders" and "new devs". Those people are very incompetent (either due to they are new or just literally don't care about things as long as it works), and clueless about what their codes is doing, hence causes tons of billings for themselves. I literally never step into any so called Vercel traps because I only use all the Vercel/Next.js features when I needed, and check docs before I implement them, just like how dev work 15 years ago, there is no magic behind. And a lot of people from I can tell so far literally don't read Docs, do whatever until they got trouble and them complain on twitter. The part Vercel did so wrong is that they shouldn't advertise too aggressive to those so called founders. or they need to advertise in a more careful way, those "devs" are just so incompetent. The current Vercel situation is very similar to the javascript community. The modern toolings make the entry barrier is so low that you expect to see chaos.
If you check the video, the Prisma example, has nothing to do with Vercel, it's just people don't understand how DB ORM works and never care about the code they are writing. Literally skill issue. Those code wouldn't even pass my PR review if the speed becomes an issue but it turns out many experienced devs (even so called senior devs) have no idea why their codes are slow and I have to fix it for them. I'm literally disappointed, I don't even call myself a senior dev...
@@ivo22mun technically speaking, there is no correct answer other than being open, especially don't immediately blame particular libs or framework. 90% of the times you will find it's a skill issue. Check the documentation of the library or github issue/discussion if you encounter a problem that related to that library. Measure the time of each part if something is being slow. For example, if one component rendering is slow, measure the overall api time measure the rendering time, then measure the DB call time, measure the data size you try to query. Often you can find the issue is from your own code rather than particular library is slow. This is pretty standard for any good engineer to debug an issue.
This unstable cache things looks pretty useless for anything but trivial apps. Sooner or later you'll have hundreds if not thousands of cached queries as well as a similar amount of modifying queries. Figuring out which ones to invalidate by hand is a nightmare and an endless source of bugs.
Very good stuff. But I'd love to know more about the caching user and not calling on every request thing? Especially if you are using an external auth like clerk or supabase, how would you avoid checking the user on each request especially for authenticated requests?
Am I the only one who does some quick back-of-the-envelope calculations to see if bills for things like CDNs would be reasonable with the amount of data expected to go through the service?
Noob here, how does a more general image optimization path let other people exploit your optimization cap? Doesn't Vercel only optimize the ones your project uses? Do they traverse the entire path for all possible images and optimize those?
Isn't the bandwidth hit from hosting large images on vercel minimal since after the first time the page is visited, it would use the optimized version on vercel's cdn, no?
Either Theo or payload’s marketing team needs a raise. The most low effort sponsored segment which will probably generate the highest respect.
Yup. I don’t think I’ve ever gone back in a video to catch a sponsorship spot before, but here we are. Props to the whoever put that together, and tbh I have been thoroughly enjoying non-channel-sponsored Theo
Also think this was super refreshing and not the standard Blabla ad
Where is the ad? I watched the video very quickly but cant seem to find it? I am using payload already and it is such a great dev experience. I love it.
@@oemeraran8183 0:53 It's a non-ad ad, lol
I fr for the first time actually paused a video, and went to checkout the sponsor. Lucky enough, I may be landing a project where I have to build a CMS. This would make my job so much easier.
THIS is the type of content where Theo truly shines
Good ad sponsor on this video.
Thanks. We put a lot of effort into this ad.
Best about Uploadthing IS the Cross Site Hacking because of the Uploadthing Origin for assets in the own Page good Job.🎉🎉🎉🎉 Love it
Actually really great idea to cut down ad time, felt I had to check this out in 5 seconds
i love payload ❤
@@francescoamici8267 🖤
As a junior web dev, thank you very much for this types of videos. Your video about 'use client' saved me from leaked credentials and this video helped to highlight some problems that I didn`t even know existed.
What is the title of the video about the 'use client'?
what is the use client video called?
@@stills2359 Sorry I don`t remember and I cant find this video.
@@Metiniaris Sorry I don`t remember and I cant find this video.
That payload ad was so good, I actually checked them out and I will use them i the future.
So will I
Finally no drama, just pure tips & trics stuff. Thanks!
Payload is so good that even if it doesn’t need to be sponsored, It payed the AD to save our time from being waisted ❤
based sponsor
🍻
payload and its community is such a gem in the cms space. criminally underrated
Shout out to payload!
Thanks for the 🖤.
What % if revenue generated using Payload needs to be paid to the Payload Foundation ;)
@@Kane0123 too soon.
payload is goated, I just need the docs to be clearer on how to connect payload cloud storage to things like cloudinary
thank you! somebody actually just opened a PR for Cloudinary + Payload! gonna review it and merge it ASAP
@@JamesMikrut thanks James, you’ve built a wonderful product.
Implementing a memcached wrapper around SQL servers when writing perl programs was something I did, something we all did, over two decades ago. Nice to see the future finally showing up for serverless.
This video is very helpful for me as a junior dev, in my past projects i did almost every mistake you've shown
Thank you Theo
this lowered my vercel anxiety fr thank you
Yep, Vercel/Netlify are not intentionally evil and hyper expensive... a lot of people on Twitter have some skill issues.
Yes but when you have to go so deep on the knowledges you need to have about a platform/framework to avoid having a gigantic bill then there's something's wrong anyway. Or then it's a product built only for top tiers developers who can deep dive into the framework.
skill issue is deploying on vercel instead on your vps, so people on twitter have double skill issue xD
@@Theprouteu Using a managed solution has a learning curve, but is not that complicated if you read the docs, and if you already know about servers, image optimization, lambda functions or how CDNs work, and you get that knowledge within a couple of years in active web development.
@@paca3107 It's a choice... experimented developers who know how to spin off a Linux server, also use platforms like Vercel for the convenience, because it is an actual benefit of these platforms.
But yeah some, inexperienced or irresponsible developers come to these platforms like they know everything in the world, many of them don't even read the docs, they took things for granted and they good a reality check when they receive a big bill due to its irresponsibility, lack of experience or lack of research about how the platform works and how the platforms charges for compute, or other stuff.
@@paca3107 this!
This is what we need. More of this Theo like optimizations, DIY etc! Awesome job!
Payload is gonna take next js by storm when it’s out of beta and gets some cleaned up docs, etc. it is seriously amazing.
Probably the most needed video in the developer community. Ty
Your boy here was the one pushing them for YEARS. He is the REASON the developer community is in the state is right now (thinking you need to pay 600% premiums for infrastructure you can build yourself very easily)
@@chilli943 vercel made it easy for Developers to make everyone feel like a great developer. But the truth is they have to make money somehow. This channel is not really for beginners most of us read the pricing models from the start. You can’t blame Theo for people not reading how vercel charges. There’s a lot of optimizations vercel does. I personally don’t use them because I’m a laravel guy but we can’t deny their effort. If you use all the optimizations vercel does then you have to know that don’t come free. Always remember no one works for free
I don't like your videos when they're not like this one. I think you have a very wide knowledge on how the front end ecosphere works, and THIS is the kind of videos where your knowledge shines.
Props, great video theo.
Wow this video was one of the most helpful ones, I have ever watched. I've found out about most of the stuff on my own over the years, but here is so much knowledge in 27 mins. Could have saved me a lot of headaches over the years
Skipping video for a quick research on payload.
Don't tell Theo but we approve of this.
Great video! Well researched, well structured, and I learned a few new things which is great. Would love to see more like this.
Half way, great video so far. Keep making videos like this please. It’s nice when videos are informative, but these ones are great too.
Best value Theo video for me so far. Thanks Theo. Keep doing the great work.
- Delete Public Folder
- use Image component less - Not every image needs to optimize
- Make less db queries, optimize them
- Use caching
- Use Static pages more
payload goat
🙏
OMG, never have i seen such an elegant sponsored segment, perfect for programmers audience
I love payload
Feeling is mutual.
When will there be an uploadthing plugin for payloadcms??
We really need to finish it...
@@t3dotgg yep maybe we could get it across the finish line next week
👀👀👀👀👀
@@ManSV14 I’m already using it in prod 😂😂
Don't use vercel or aws or google cloud or azure, get dedicated servers. Simple as that and job done, if you want to pay even less then get unmanaged servers. Right now it's easy to find unlimited bandwidth 1Gb/s or 10Gb/s. Also you can get multiple servers in case you need them to create a load balancer. That's the right way to start your business. Start small and scale based on needs.
This is the type of videos i was kinda missing from you lately, banger!
Theo - I can't tell you how much I appreciate your videos/knowledge. Thank you.
Lots of great content lately. Thanks Theo!
based ty. this and the 100% legally distinct master one have been great. optimization and security is never talked about
I'm definitely saving this for later and i'll watch this every time when i'm putting things to vercel
Theo before leaving: “Vercel has no control over what I talk about”
After leaving: “That means I can talk about things they might not have wanted me to talk about in the past”
🧐🧐
Lol
I thought the same. There‘s a loophole here though. It’s like lying, is not saying sth. lying? Anyway, I get what he means by that. It always makes a difference when there’s a business relation.
@@frowin2 Tbf I did appreciate Theo’s philosophy of taking sponsors he believed in, and I don’t actually think he was a Vercel shill. I just thought this was funny
This was a really good video! Lots of helpful information and illustrative examples. Thank you!
Uploadthing looks nice but I'm missing EU GDPR and EU Data Residency
I think this is my favorite video from you so far
I appreciate these tips even though I plan on deploying on a VPS, they are just good best practises and I hope people don't skip this video thinking it doesn't apply to them
I've never been happier for an ad
Appreciate you putting in time to properly demo
This is the first video or yours that actually sold me on using vercel
Great guide, that unusually simple ad segment actually got me curious about payload
Amazing contents!
I instantly went to investigate my /public folder. I found that we have OG imagaes for social media which sit around 120-160KB. I suppose it should not be a problem to host these outside Vercel CDN. But I also found that since we are generating favicons for mobile platforms, some of our android favicons are also in the 120KB range. I would definitely want the regular small sized favicons that browsers use to be loaded fast to not impede first load, but I'm wondering if we have these high resolution favicons specified in the sitemanifest whether they will impede the load time if I hosted them out of a slower provider?
Revenge and good content in one, well done!
- Avoid placing large assets in the public directory to save on CDN costs
- Use external storage services like S3, R2, or UploadThing for large files
- Limit the paths allowed in image optimization to prevent excessive costs
- Run database queries concurrently to reduce blocking and minimize compute time
- Use caching mechanisms to reduce redundant API calls and database queries
- Ensure mostly static pages are generated as static HTML to avoid dynamic costs
- Monitor image optimization costs on Vercel, especially for high-volume projects
- Consider alternative analytics services to avoid high Vercel analytics fees
Extremely helpful video, with tons of great advice. Thank you, Theo!
Excellent rundown on Vercel. Kudos!
Thank you so much for this video Theo. ❤
Opportune timing for publishing this video. I see you, Theo. Love it. Fight the power.
Thank u for showing me payload
Watched start to finish. Kudos to RUclips algorithm
Yo this was actually really helpful man keep this up ❤
Really good video bro, a pleasure for us to watching this type of stuff.
I really liked this video, learned a lot from it. Will you some more of these partially code review videos in the future?
Payload website is beautiful.
I've been waiting for this video for a while, thank you!
Question: why do people do any of this shit instead of just paying for a php server or something? This seems like a ridiculously complex solution for problems that were already solved 20 years ago
Thanks, that was a super useful video. I am just getting started with NextJS and am pretty nervous about hosting with Vercel. Are there logs that show bottlenecks with performance that I should be monitoring?
Nah this was a great video! It helped me get insights on things I didn't even know where a "thing". Thanks a lot
Why doesn't vercel just have a cap on its billing. Most companies have a ceiling above which , they know something went terribly wrong.
You can set a cap on Vercel. But it stop all your services once the cap is reached 😅
you should watch the video
….
Cloudflare workers don't include the api wait time or their own ai service for their billing. You only pay what you use
Compute and bandwidth are quite reasonable, but I've been seeing stupid charges for monitoring + log drains. Any tips for that?
the thing about parallel db queries: from one side each particular request indeed takes too long and its totally dev mistake, but from another putting a node engine code with such easy-to-use "concurrency" into an environment, where you spin up a dedicated lambda instance for each request (instead of re-using already running and idle instances) is simply a serverless SCAM that aws started a while ago and everybody got along with it
Can confirm, payload is very good.
Theo you are gem, hope you know it! Thank you as always! Keep it up🔥
The four queries is criminal.
Looks like I am watching old theo
One of the very first videos that I watched was you explaining even though TypeScript is slow still why it makes sense to make apis in it and when to bring in go and rust.
`unstable_cache` is considered legacy though. Wouldn't `use cache` be the better approach?
A mercenary who tells a new story when not getting paid
This video has responded to some of my issues!
friendly reminder to use select over include for security and performance
I have the best solution!
Run on a 10$ a month VPS and have unlimited everything. Woah.
Theo mode killed me, I thought you were just trolling with a custom extension...
This video was awesome and super helpful
the prisma query one was funny af
honestly, Vercel should pay him for this video.
Quick question on 15:36 part of serverless functions duration, what if we need to merge data from a external API and a CMS for say. CMS queries are cached but the external APIs are not and as we need specific data from CMS then it needs to depends on the response of API. How do you think you’ll tackle that kind of problem?
Hey, I believe I may have noticed a minor issue in your unstable_cache() demo. You used "posts" as the cache key, but then used the same value in the revalidateTag() call. The issue is that the cache key isn't used for revalidation; it's the tags that matter. You need to specify "posts" as a tag instead for revalidateTag() to work correctly as far as I'm aware.
im building a framework that will make vercel unnecessary 😂
Optimizing Images can be done with single lambda running sharp on it . and connected to cloud front params (like w=200&h=200) isn't that hard to make your own.
Looking at my usage, the "edge requests" is what often goes over the free tier limit. I wish there was a way to see a breakdown of which paths are the hottest to optimise.
Just today i deployed to Vercel a public/videos folder with bunch of small videos for the landing page. No wonder it was fast.
Amazing Theo, i'm so new to this.
I want to summarise this video though but there's no transcript for it :(
You mentioned you don't charge for egress on UploadThing. Does that mean it's using R2 now instead of S3? (Searched a bit but did not find :) )
Ok, vercel is just too risky and expensive, like firebase.
But what is your take in cloudflare pages and workers?
it's not Vercel is too risky, It's Vercel makes entry so easy for new devs and somehow they market towards many so called "founders" and "new devs".
Those people are very incompetent (either due to they are new or just literally don't care about things as long as it works), and clueless about what their codes is doing, hence causes tons of billings for themselves.
I literally never step into any so called Vercel traps because I only use all the Vercel/Next.js features when I needed, and check docs before I implement them, just like how dev work 15 years ago, there is no magic behind.
And a lot of people from I can tell so far literally don't read Docs, do whatever until they got trouble and them complain on twitter.
The part Vercel did so wrong is that they shouldn't advertise too aggressive to those so called founders. or they need to advertise in a more careful way, those "devs" are just so incompetent.
The current Vercel situation is very similar to the javascript community. The modern toolings make the entry barrier is so low that you expect to see chaos.
If you check the video, the Prisma example, has nothing to do with Vercel, it's just people don't understand how DB ORM works and never care about the code they are writing.
Literally skill issue. Those code wouldn't even pass my PR review if the speed becomes an issue but it turns out many experienced devs (even so called senior devs) have no idea why their codes are slow and I have to fix it for them.
I'm literally disappointed, I don't even call myself a senior dev...
@doc8527 True, skill issue.
Im taking drizzle, btw in general terms which are your advices on how to make good code on sql w/out ORM?
@@ivo22mun technically speaking, there is no correct answer other than being open, especially don't immediately blame particular libs or framework. 90% of the times you will find it's a skill issue.
Check the documentation of the library or github issue/discussion if you encounter a problem that related to that library.
Measure the time of each part if something is being slow.
For example, if one component rendering is slow, measure the overall api time measure the rendering time, then measure the DB call time, measure the data size you try to query. Often you can find the issue is from your own code rather than particular library is slow.
This is pretty standard for any good engineer to debug an issue.
This unstable cache things looks pretty useless for anything but trivial apps. Sooner or later you'll have hundreds if not thousands of cached queries as well as a similar amount of modifying queries. Figuring out which ones to invalidate by hand is a nightmare and an endless source of bugs.
So, in a serverless env, optimizing for perfs is also optimizing for cost. Cool stuff.
How To Avoid Big Serverless Bills ? Selfhost your services on a vps :3
Very good stuff. But I'd love to know more about the caching user and not calling on every request thing? Especially if you are using an external auth like clerk or supabase, how would you avoid checking the user on each request especially for authenticated requests?
Theo throwing some bombs here! 🔥
Am I the only one who does some quick back-of-the-envelope calculations to see if bills for things like CDNs would be reasonable with the amount of data expected to go through the service?
Noob here, how does a more general image optimization path let other people exploit your optimization cap? Doesn't Vercel only optimize the ones your project uses? Do they traverse the entire path for all possible images and optimize those?
Thank you for this!
How different would the code be if you were doing the same stuff not on Vercel but maybe a VPS?
Isn't the bandwidth hit from hosting large images on vercel minimal since after the first time the page is visited, it would use the optimized version on vercel's cdn, no?
Thank you theo very helpful
Very informative, Thank you
You are a GOAT. Kudos!
Payload OP