I always see your commits and so on in the vercel repository , seeing how active you are, I hope you can upload more videos, you explain in an amazing way, I would like to see more complete topics or projects, with the way you explain it would be appreciated.
Like always best nextjs explanations on the internet. Thank you very much for taking the time to do this content. Nothing related to this but what is still missing on nextjs videos out there is how to architecture the use of nextjs on advanced use cases, dynamic data in layouts dependent also on actions on pages, and a lot more. All those videos about lets build entire website in 10 minutes is not even close to what reality is. Thanks any way for driving me closer to creating my own best way to do things
Amazing content! I really appreciate the way you present code-it’s both clear and engaging. I noticed you’ve mentioned Remotion before, but it would be awesome to get some guidance on where to start. Are you using any specific tools or libraries to handle differences, animations, and transitions? Any tips or clues would be greatly appreciated!
Kind of, not directly, if a Server component with 'use cache' uses client components, the total output will be cached. But you can't add 'use cache' inside the 'use client' boundary.
Hi Delba, thank you for this clear explanation. My current project is using unstable_cache. Is unstable_cache irrelevant now, and “use_cache” the way to handle caching in Next.js? Thanks in advance
Keep using unstable_cache for now. 'use cache' is still in active development. We'll provide detailed migration guides + automatic codemods when it's done.
Nop! PPR makes the whole page behave in the same way: everything is static rendered, besides the dynamic parts with suspence. This is better because you can literally split the page into static and dynamic parts, and the dynamic parts can be serverside rendered without suspense! (at least i assume so) The examples she gave might not be the best to explain the difference between PPR and use cache, but look at 1:19 in the video. If you look at the code at the top part of the screen, she is using fetch, therefore, if you were using PPR, actually the whole route would turn dynamic anyways, nothing would be static, because the fetch is being done outside of a component wrapped by Suspense! PPR only works if you wrap whatever component is using the fetch, reading the headers or reading the cookies with suspense! With use cache, i assume you can literally use the fetch anywhere, and it will cache the result and make the outcome static as long as it doesnt expire.
How about creating a wrapper function for db query and passing optional caching parameters. Some quieries might be cached some not. Is it possible to put “use cache” in an if state like if(cache) “use cache”? Second problem is Suspense. Why would I need a fallback loading state for a cached query already received server-side. I didn’t understand the purpose of it except ppr. It’s nice to have a built-in reacy query style fetching after dom loaded yes, but i hope it doesn’t affect static renderings. Thanks for your work and hope there are answers for these.
'use cache' fn Cached(profile) { cacheLife(profile) .... } --- boolean ? : --- The fallback for Suspense is not for cached stuff, it's to show something to the user while dynamic stuff loads.
Greetings from India, Delba!💖💖 Your content is consistently impressive. Have you considered building a complete application with Next.js, incorporating all the best practices? Your work is truly remarkable.
Can components be cached? If so, has it been converted to static HTML? What would it be like in terms of performance to convert dynamic data, such as comments, to HTML on the server and present it statically in every request?
That’s interesting and the animations are so good! But what would happen by default of if switch from Next 14 to Next 15 and I try these changes and I *don’t* add *any* new wrappers or “use cache” directives? Will it forcefully throw an error and force me do the respective changes? Would it also throw an error if I’m only doing RSC and server rendering for static markup? 😢 or will it render all at build time and serve as static by default? Is “use cache” the only way to tell Next.js that I want a static page cached in the CDN?
Thank you! These changes are not part of Next.js 15. They are in the canary version and have to be enabled via an experimental flag. When the time comes to make these stable we will heavily invest in migration tooling and education.
What about server actions that do mutations we want to be reflected immediately after? Now we only have revalidateTag with cacheTag and no more revalidatePath?
It's slightly different. React query is geared around the client side and has many great features for that. cacheLife is across client and server caching layers.
I like the directive idea overall but when it comes to adding cacheTag and cacheLife this API starts to feel a bit off. Something like a function decorator which can also accept parameters feels a bit more convenient and keeps relevant caching information together in one place. Though I don't know if this covers the file-level directive scenario and definitely doesn't allow using data from the request.
My guess it that the Suspense fallback won’t ever trigger since the children will always return the same cached output. I believe Suspense will be ignored.
Whatever is inside the 'use cache' boundary will be cacheable, whatever is above it will be dynamic. If there is nothing dynamic, it won't take time, so it should be instant.
@@Delba does "use cache" work during development as well? I couldn't find any information on that. I hope it does cache during dev too. Having different behaviour in dev (and potentially hit API rate limits) are very confusion. If its not cached, imo there should be options to enable dev caching. thanks! 💜
@@Delba Understood. The new caching system will combine the data cache and full route cache. If you use `use cache` on a page level, it will be full route cache. On a function level, it will be data cache (or legacy unstable_cache). I am waiting for further documentation about this in the caching section of Next.js documentation. Thank you.
The default cache profiles are seconds, minutes, hours, days, weeks or max. The idea is most content falls into one of these broad buckets. If you want to be very specific, you can create your own cache profiles with the exact values you want.
Not in the same file, but you can either import them into 'use client' from a separate file with "use cache" at the top, or pass them down through props from a Server Component.
Similar ideas of tagging a cache entry and setting a lifetime, but slightly different since RQ focuses on the client (and is very good at it) but this controls the cache across the client and server.
If 'use cache' is to tell Next.js that this should be cached, why do we still need Suspense to tell that this part is dynamic. Shouldn't it be automatically dynamic?
I guess to specify the components which depend on the cached data. If something doesn't reside within the Suspense boundary, it would be static. And wouldn't make any sense to cache something which is static.
Since worlds can be interleaved via props, you need a way to "go back" to the other world. Also, Suspense provides a place to pass in your fallback UI.
then proceeds to upload another video next week - "The real future of Next.js" month later - "The legitimate future of Next.js" two months later - "Complete new future of Next.js" nothing against the presenter, Delba is an awesome advocate. But man, vercel you gotta stop making these "breaking" major changes every month and focus on buildling solid solution that can carry out long term.
"focus on buildling solid solution". I agree, that is the spirit of these changes. Software evolves from feedback from users and lesson learned. You don't arrive at the perfect solution in a vacuum.
@@Delba Agreed 👍 and you do an awesome job on giving updates and teaching these new changes based on feedbacks. We really appreciate :) and still, the general consensus around the developers is that Next.js has too many, too often breaking changes and we are starting to grow tired (not this particular topic, but Next.js evolvement over past 2 years). And if you don't agree with this statement, then Vercel team is just tone-deaf. I'm probably missing many contexts as I'm not part of the vercel team and im sure team is doing an awesome job, but this is my take as a fan of Next.js and many others. just listen and hear them out on what real users of Next.js are saying these days.
Seriously? Copying Fireship's title and style? That’s lazy and misleading. You’re just clogging search results and stealing views from the original creator. Do better.
Why is Next.js becoming more complex with each new version update? Instead, you should focus on maintaining compatibility with previous versions, as many features get deprecated with each new release.
These changes are designed to be simpler. They are iterated on after feedback from the community and lessons learned. We rarely deprecate APIs (there have been no major deprecatations in version 13, 14 or 15) instead we provide refined APIs and allow the community to migrate at their own pace.
I've kinda hyped myself up, because I'm always the guy that has to go in and explain caching in NextJS to people. I solve caching and optimization issues all the time. You're gonna make me irrelevant. You're making it too easy.
I hate the "suspense" thing. It's much easier to know what's going on with ternary operator. The suspense behavior is unpredictable and feels "magic", and also ups the learning curve
This was a Fireship type of content without the memes and sarcasm. Love it!
Fireship Indeed
God. I love every single video you've uploaded, the animations are smooth as hell. Your videos are way even better than paid content I've seen. 😭
Thanks, appreciate it!
Really awesome! The caching story in Next.js is much clearer now. Looking forward to trying it out to see if it's as easy as it sounds! ;)
I always see your commits and so on in the vercel repository , seeing how active you are, I hope you can upload more videos, you explain in an amazing way, I would like to see more complete topics or projects, with the way you explain it would be appreciated.
Like always best nextjs explanations on the internet. Thank you very much for taking the time to do this content. Nothing related to this but what is still missing on nextjs videos out there is how to architecture the use of nextjs on advanced use cases, dynamic data in layouts dependent also on actions on pages, and a lot more. All those videos about lets build entire website in 10 minutes is not even close to what reality is. Thanks any way for driving me closer to creating my own best way to do things
Thanks. A few people like @codewithantonio, @nikolovlazar and @WebDevCody post longer form architecture videos you might be interested it.
As they said in cs50 course, this is Nextjs, the vercel react framework 🇨🇲 !
Thank's Delba continuous to explain something simple as you do 💪.
Such a great wrap of information in 100 seconds, Love it
I love your simplicity.
Nice video, keep it up!
Salutes from Brazil!
That was a really great explanation, Thanks Delba!
Fireship level of content.
this is so COOL! im so excited to update my next js project to the next level. really appreciate it.
Amazing content! I really appreciate the way you present code-it’s both clear and engaging. I noticed you’ve mentioned Remotion before, but it would be awesome to get some guidance on where to start. Are you using any specific tools or libraries to handle differences, animations, and transitions? Any tips or clues would be greatly appreciated!
What a good content, love NextJS ! Thank You Delba
Wonderfully concise! Thanks for this
Thank you very much for this content, good and simple way of explaining it
loved your way of explaining thanks much!
Love your videos Delba
brilliant work as always 🚀
Thanks Delba! Can you also cache client components? I am not sure which cache layers "use cache" handles.
Kind of, not directly, if a Server component with 'use cache' uses client components, the total output will be cached. But you can't add 'use cache' inside the 'use client' boundary.
Pretty cool, I like that now Next.js will force you to wrap component within suspense for dynamic content, much clearer IMO.
Awesome as always...
Concise and clear
Thank you ❤
Thank you for this clear video. May I ask what tool did you use to create amazing demostration like this?
Thanks, I use Remotion
Hi Delba, thank you for this clear explanation. My current project is using unstable_cache. Is unstable_cache irrelevant now, and “use_cache” the way to handle caching in Next.js? Thanks in advance
Keep using unstable_cache for now. 'use cache' is still in active development. We'll provide detailed migration guides + automatic codemods when it's done.
Love your video format! Are you using vscode? How did you make the line numbers green?
Nice explanation
awesome video, as usual 👏
Will all of this only work when hosting on Vercel, or will it work regardless of host, say something like Firebase App Hosting?
The cache is in-memory by default and has a cache handler you can configure to persist on your own infrastructure.
Fireship got me here xD
Nice share 😃 keep sharing pls such good content like this delba
Concise, laconic, only things that matter! I like this style A LOT! How do you create your videos?
Thanks, I use Remotion.
❤
This is amazing ❤
1:08
Having parts cached and other dynamic, isn't this the PPR feature or this is something else ?
I thought about the same. I need to know!
Nop! PPR makes the whole page behave in the same way: everything is static rendered, besides the dynamic parts with suspence.
This is better because you can literally split the page into static and dynamic parts, and the dynamic parts can be serverside rendered without suspense! (at least i assume so)
The examples she gave might not be the best to explain the difference between PPR and use cache, but look at 1:19 in the video.
If you look at the code at the top part of the screen, she is using fetch, therefore, if you were using PPR, actually the whole route would turn dynamic anyways, nothing would be static, because the fetch is being done outside of a component wrapped by Suspense! PPR only works if you wrap whatever component is using the fetch, reading the headers or reading the cookies with suspense!
With use cache, i assume you can literally use the fetch anywhere, and it will cache the result and make the outcome static as long as it doesnt expire.
@@dominikkoniarz1803 see my comment above
How about creating a wrapper function for db query and passing optional caching parameters. Some quieries might be cached some not. Is it possible to put “use cache” in an if state like if(cache) “use cache”? Second problem is Suspense. Why would I need a fallback loading state for a cached query already received server-side. I didn’t understand the purpose of it except ppr. It’s nice to have a built-in reacy query style fetching after dom loaded yes, but i hope it doesn’t affect static renderings. Thanks for your work and hope there are answers for these.
'use cache'
fn Cached(profile) {
cacheLife(profile)
....
}
---
boolean ? :
---
The fallback for Suspense is not for cached stuff, it's to show something to the user while dynamic stuff loads.
Thanks for the updates.
Thank yu, please which software are you using to make this smooth animation on your code when you explain it
Greetings from India, Delba!💖💖 Your content is consistently impressive. Have you considered building a complete application with Next.js, incorporating all the best practices? Your work is truly remarkable.
Can components be cached? If so, has it been converted to static HTML? What would it be like in terms of performance to convert dynamic data, such as comments, to HTML on the server and present it statically in every request?
so good 🖤
Me gustan tus videos y la forma de explicar, ojala subas contenido mas largo o frecuentemente n❤
Great video thank you so much
What theme do you use in your IDE?
Vitesse
Such an amazing feature 😍. Your videos are so simplified. Which tool or effect is used here to demonstrate code? Please guide me.
Thanks, I use Remotion.
@@Delba Thanks 👍
Great! When will these APIs become stable?
No dates yet, but it's high priority for the team.
Thank you 💖
That’s interesting and the animations are so good!
But what would happen by default of if switch from Next 14 to Next 15 and I try these changes and I *don’t* add *any* new wrappers or “use cache” directives?
Will it forcefully throw an error and force me do the respective changes?
Would it also throw an error if I’m only doing RSC and server rendering for static markup? 😢 or will it render all at build time and serve as static by default?
Is “use cache” the only way to tell Next.js that I want a static page cached in the CDN?
Thank you! These changes are not part of Next.js 15. They are in the canary version and have to be enabled via an experimental flag. When the time comes to make these stable we will heavily invest in migration tooling and education.
@ thank you for responding!
These changes look promising and exciting :) glad to know you all hear our feedback
Love you Delba
What is your VS code theme and font family
theme : vitesse
What about server actions that do mutations we want to be reflected immediately after? Now we only have revalidateTag with cacheTag and no more revalidatePath?
you can also use revalidatePath
revalidatePath() uses revalidateTag() under the hood.
- source: I heard Lee Rob say that in a live stream.
You are awesome
so it's react query now?
It's slightly different. React query is geared around the client side and has many great features for that. cacheLife is across client and server caching layers.
@ thanks!
Random question: inline server actions need the 'use server' directive, so can it combo with 'use cache' and if so how does that work?
That's pretty nice.
is ok to use "use cache" now for a new production project?
I like the directive idea overall but when it comes to adding cacheTag and cacheLife this API starts to feel a bit off. Something like a function decorator which can also accept parameters feels a bit more convenient and keeps relevant caching information together in one place. Though I don't know if this covers the file-level directive scenario and definitely doesn't allow using data from the request.
All APIs choices have tradeoffs. The team evaluated many styles, and this one ticked the most boxes, considering all the constraints and future plans.
Hi, was this directive only possible in next 15 canay ?
Damn, this font is so awesome, can u share your font vscode settings?
what theme vscode u use, so chill
Vitesse
@@Delba thank u
What happens if I MyComponent has 'use cache' and I wrap it inside a Suspense component?
My guess it that the Suspense fallback won’t ever trigger since the children will always return the same cached output. I believe Suspense will be ignored.
Whatever is inside the 'use cache' boundary will be cacheable, whatever is above it will be dynamic. If there is nothing dynamic, it won't take time, so it should be instant.
Will this cache the entire function or just the fetch call inside it.
e.g. will it also cache “return new Date()”
It caches what is returned. E.g. if you fetch a 1mb json payload, but return data.title, it will only cache that.
@@Delba does "use cache" work during development as well? I couldn't find any information on that. I hope it does cache during dev too. Having different behaviour in dev (and potentially hit API rate limits) are very confusion.
If its not cached, imo there should be options to enable dev caching.
thanks! 💜
Yes, it's an in-memory cache, that works in dev (hard refreshing clears the cache).
@ 💙💜💛💚
Great 😃
Why using Suspense when we can use the loading.ts file ?
You can use either. Loading.js creates a suspense boundary.
Any idea when 15 will be fully ready along with ppr?
v15 is already out. PPR is still in active development. The changes in the video allow make PRR easier to implement and use.
@Delba can u make a video explaining how use cache is different from ppr?
the app router is still so buggy for the dynamic SEO :( Still using pages router
Tell me more and I can share it with the team.
Is there no longer revalidatePath for the new caching system?
It's still there.
@@Delba Understood. The new caching system will combine the data cache and full route cache. If you use `use cache` on a page level, it will be full route cache. On a function level, it will be data cache (or legacy unstable_cache). I am waiting for further documentation about this in the caching section of Next.js documentation. Thank you.
days can be 3 days or 6 days or 20 days and more.what the maximum?
The default cache profiles are seconds, minutes, hours, days, weeks or max. The idea is most content falls into one of these broad buckets. If you want to be very specific, you can create your own cache profiles with the exact values you want.
Can i use 'use client' and 'use cache' together in one component file?
Not in the same file, but you can either import them into 'use client' from a separate file with "use cache" at the top, or pass them down through props from a Server Component.
@Delba thanks, gotcha 🙌
cachetag and cachelife? isnt this just like react query with its querykey and queryoptions?
Similar ideas of tagging a cache entry and setting a lifetime, but slightly different since RQ focuses on the client (and is very good at it) but this controls the cache across the client and server.
If 'use cache' is to tell Next.js that this should be cached, why do we still need Suspense to tell that this part is dynamic. Shouldn't it be automatically dynamic?
I guess to specify the components which depend on the cached data. If something doesn't reside within the Suspense boundary, it would be static. And wouldn't make any sense to cache something which is static.
Since worlds can be interleaved via props, you need a way to "go back" to the other world.
Also, Suspense provides a place to pass in your fallback UI.
when will be "use cash" available please reply
No dates yet, but it's a high priority.
Can you teach me how you edit your videos?
could you share your theme?
Vitesse
nice
I think this means we don't need tanstack react query any more with next.js
You might still want RQ if you use case is heavily client-side orientated.
They are finally fixing Next
Is it released yet or still in canary?
It's still in canary.
Angelical voice 😮
Fireship got me here.
W delba
Ok, next.js has some react-query features now.
react-query doesn't cache whole routes, use cache kinda does
theme name pls :B
100 seconds huh? hmm...sounds familiar >:(
fireship know you stole his trademark in his latest video😂😂
It was a joke
@@N0Xa880iUL I know as well and do you think i am serious?😂😂
'use prefetching'
then proceeds to upload another video next week - "The real future of Next.js"
month later - "The legitimate future of Next.js"
two months later - "Complete new future of Next.js"
nothing against the presenter, Delba is an awesome advocate. But man, vercel you gotta stop making these "breaking" major changes every month and focus on buildling solid solution that can carry out long term.
this is the reason why i haven't migrated from Next12. everything feels temporary!
"focus on buildling solid solution". I agree, that is the spirit of these changes. Software evolves from feedback from users and lesson learned. You don't arrive at the perfect solution in a vacuum.
@@Delba Agreed 👍 and you do an awesome job on giving updates and teaching these new changes based on feedbacks. We really appreciate :)
and still, the general consensus around the developers is that Next.js has too many, too often breaking changes and we are starting to grow tired (not this particular topic, but Next.js evolvement over past 2 years). And if you don't agree with this statement, then Vercel team is just tone-deaf.
I'm probably missing many contexts as I'm not part of the vercel team and im sure team is doing an awesome job, but this is my take as a fan of Next.js and many others. just listen and hear them out on what real users of Next.js are saying these days.
Seriously? Copying Fireship's title and style? That’s lazy and misleading. You’re just clogging search results and stealing views from the original creator. Do better.
Mobile?
Sorry, what?
Why is Next.js becoming more complex with each new version update? Instead, you should focus on maintaining compatibility with previous versions, as many features get deprecated with each new release.
These changes are designed to be simpler. They are iterated on after feedback from the community and lessons learned. We rarely deprecate APIs (there have been no major deprecatations in version 13, 14 or 15) instead we provide refined APIs and allow the community to migrate at their own pace.
Tanstack Start can't come fast enough 🙏
React query bts
Fireship has the eye on you. Stay safe queen. Kisses and Hugs
Future Fireship video stolen in 100 secs.
Just kidding!
idk rick
Future of JavaScript:
```
"use strict"; "use cache"; "use types"; "use server"; "use ai" //....
```
💀
Your voice is very beautiful can you bring the full course of Next .js (3hours)
Pajeetmaxxing
1:54 that's not it, that's pretty confusing.
Almost anything is, until it's put into practice and studied.
@@codefinitythis cachelife cachetag ia here, use cache what happened to fetch "next" options, old ways
In most cases, you'd use a built in profile like `cacheLife('minutes')`. Passing an inline config will be rare, but it's there for ultimate control.
@@Delba 👍🏾 Granularity.
@@Delba how many seconds do “seconds” mean. Same with minutes and days, is it arbitrary or opinionated?
I've kinda hyped myself up, because I'm always the guy that has to go in and explain caching in NextJS to people. I solve caching and optimization issues all the time. You're gonna make me irrelevant. You're making it too easy.
I hate the "suspense" thing. It's much easier to know what's going on with ternary operator. The suspense behavior is unpredictable and feels "magic", and also ups the learning curve
You can’t use ternaries in server components as they run once
There are many benefits to its design besides simple branching. More here: react.dev/reference/react/Suspense
Are you ai character?
Yes.