Couldn't agree more. Next cache is really confusing sometimes or too opinionated, maybe. Idk. I'm letting the initial code without any cache config and fixing it as needed down the road.
Is it just me or does it seem like JS directives are being abused here? Maybe I'm missing something, but this "API" feels incredibly janky and in my opinion is likely indicative of an overall design flaw.
Pretty much every js framework abuses js syntax or just straight up adds new syntax or AST transformers to achieve what they want. I wish one of them would go all out and just make a new programming language already that's heavily based on js but actually has first-class support for the features they wanna add like components or reactive state. React came closest with jsx but it's still very half-baked because it's just sugar for createElement(element,props,children)
@@pokefreak2112 I'm not sure how active the development is, but I remember mint-lang was basically that, React concepts baked into a pretty declarative language. In any case, at the end of the day it's gonna be sugar for JS or sugar for WASM. The tricky part is making sure all the sugar is "standard" and works well in the language, and, well, random magic strings are probably not really great. It'd be nicer to have some sort of Next context object that you can set a flag to or call a method on, so then you didn't need a custom build step. But anyway... ship's sailed I guess.
@@pokefreak2112 See Flow. It has a component type and render type specifies. If you think creating a language is a good solution to what some people consider "bad API", then you're off the mark.
This feature and several others that Vercel engineers are developing open the doors (to the business sector) to a new generation of applications, faster and less expensive at the back-end level. Of course, they are not things that currently cannot be achieved with other mechanisms, it is just that if Vercel or any other reputable company takes them as base features of their framework, things will begin to become popular and be considered a reasonable option for the corporate sector. And that also helps the entire ecosystem, including open-source.
Pretty great to see this. Finally they got caching right, you tell it where and how to cache something and it just does. I just hope there will be an eslint plugin to warn you of the things that error out in build, wouldn't mind getting a warning in the editor instead of waiting a few minutes just to get a 'pipeline failed' on github. Also great to see the cached async function at 24:20, We can just make a function, return some JSX, and it all just works. Getting closer and closer to Dan Abramov's "just copy the code from client and paste it on the server" Now just waiting for GET server actions/functions and we'll be golden!
26:26 I can't even read so fast as you write with AI! This so cool! Your speed of iteration is of COSMIC SIZE. While I would only create a file, you already wrote all code and run the demo :D This AI helper is something!
28:50 It is so useful that you are showing the actual workflow of bugfixing! When there is a polished video without any bugs, it feels unnatural! When I do stuff, I'm getting lots of errors! Cause I frequently do dumb stuff :D And watching how YOU react to error is an amazing experience! Of course, if the bug does not take 10 hours to fix, lol :D
It's wild that they didn't do this from the start. Opt-in to caching, do not cache by default - and also differently in dev/prod. No wonder there was a lot of confused and annoyed developers.
@23:29 The immediate use case for me is when making calls out to external "metadata" endpoints, like oidc well-known config. That is generally cached for 24 hours and now I don't have to worry about doing that basic behaviour myself
I think they know what they’re doing. They might not care or do it on purpose even? It gives some media buzz and people are more tolerant to bugs. Or what do you think?
Getting really into remix. There's a lot I don't like, but everything I don't like about remix is exactly the same things that I don't like about the app router in next.js. Although, this video highlights one of the exceptions.
I'm a fan of remix, but the lack of middleware is a nonstarter for me. So much copy-paste is required for simple things like authenticated route paths.
@@bruceleeharrison9284 Right now I'm just doing research. I'm trying to port our next.js app that makes heavy use of swr to see how that compares to porting the same project to the page router. Likely we'll keep using Next.js and the page router for a while, but it's fun to learn new things.
Back to `goto` days then, look for a "use cache" somewhere. I think they are using js directives to simplify build/bundle system, on the other hand they are introducing indirection a lot.
I liked the unstable_function more with only a single downside that it was hard to customize the tags of it since they needed to come from outside of the unstable_cache call. The cacheLifetime and cacheTags seem promising but until they are usable in server functions called from client components it really isn't usable sadly.
Guillermo doing a commit named “founder mode” on a demo app that is not even of a todolist complexity is sooooo cringe. Almost as cringe as Theo saying he is “leaking” and “reverse engineering” nexjs. And not as cringe as Vercel thinking that having less caching code is the way to fix the fact that they gave us not enough control.
Why we need so much abstraction for just a simple Cache-Control header. Cache-Control: max-age=10, stale-while-revalidate=20 Does after all this abstraction NextJS generate Cache-Control header like above that can be used by all CDN or some vercel specific magic 🪄. For on demand revaldation we should be able to declare our own revalidate function where we can send a API request to the CDN provider we are using to delete the cache. It will allow self host it without missing stale-while-revalidate feature.
I’d like to ask those criticizing Next.js for directives like 'use cache', 'use client', and 'use server': while 'use cache' was introduced by Next.js, 'use client' and 'use server' actually came from React. Just like JavaScript’s 'use strict' directive, these aim to enhance performance and enforce best practices. So why single out Next.js for using tools that improve modern web development?
Every time I heard "caching is hard" from other devs I was like "phew, you're overestimating it"... ...Then I implemented adaptive replacement cache for a filesystem one day and realised how annoying this thing is. Luckily I live in the EU where we don't have software patents, so I was free to just looked up a few US patents for filesystem caching, blatantly steal their ideas and figure out a good middleground.
I don't want to use nextjs anymore. because it has a big difference between development and production behavior and it's also pretty tightly bound to the vercel platform
Oof. At 5:30 nobody told Theo that js is perfectly fine and is in general preferred over the jsx extension. Tsx is inescapable and most likely, Theo 's just been in TS land for so long that he assumed the same applies for vanilla js. This is the most charitable viewing of Theo's response I can come up with without doing crazy mental gymnastics
They have to use "await" just to know something is dynamic? lol Stop caching everything by default and let me add caching when I want it. This is so lame. All these weird quirks to work around bad architecture. Worst case scenario just add something inside cookies() to flag it as dynamic if you really need to. Don't force it to be async. 'use cache' to workaround the workaround. smh How can anyone think this is a good design? The fact that Theo says "I don't know" so many times in this video is proof it is a bad design. Nobody understands how it works or what is cached when unless they make Next.js their entire life. And even then it is just going to change in the next version anyways. Keep it simple. Let the user opt in to caching when they want and the rest of the time don't do anything.
I used Remix and didn’t find anything particularly special about it. It essentially does the same thing as Next.js’s Pages Router-fetching data on the server and passing it to the UI at the route level. Next.js’s App Router, however, is different; it was designed to adopt React Server Components.
Is there a "use cash" feature? Because I could use some cash.
Nah, that's for PHP devs.
@@noobnessmee actually 😅
"use lambo";
c++ std library has a get_money function
You must be a front-end developer
reverse engineering an open source
Couldn't agree more. Next cache is really confusing sometimes or too opinionated, maybe. Idk. I'm letting the initial code without any cache config and fixing it as needed down the road.
Is it just me or does it seem like JS directives are being abused here?
Maybe I'm missing something, but this "API" feels incredibly janky and in my opinion is likely indicative of an overall design flaw.
Pretty much every js framework abuses js syntax or just straight up adds new syntax or AST transformers to achieve what they want.
I wish one of them would go all out and just make a new programming language already that's heavily based on js but actually has first-class support for the features they wanna add like components or reactive state. React came closest with jsx but it's still very half-baked because it's just sugar for createElement(element,props,children)
Couldn’t agree more. This is getting absurd already
@@pokefreak2112 I'm not sure how active the development is, but I remember mint-lang was basically that, React concepts baked into a pretty declarative language.
In any case, at the end of the day it's gonna be sugar for JS or sugar for WASM. The tricky part is making sure all the sugar is "standard" and works well in the language, and, well, random magic strings are probably not really great. It'd be nicer to have some sort of Next context object that you can set a flag to or call a method on, so then you didn't need a custom build step. But anyway... ship's sailed I guess.
@@pokefreak2112 See Flow. It has a component type and render type specifies. If you think creating a language is a good solution to what some people consider "bad API", then you're off the mark.
@@pokefreak2112 svelte pretty much
It has been stated that the hardest 2 things in programming are naming, cache invalidation, and fixing off by 1 errors
This feature and several others that Vercel engineers are developing open the doors (to the business sector) to a new generation of applications, faster and less expensive at the back-end level. Of course, they are not things that currently cannot be achieved with other mechanisms, it is just that if Vercel or any other reputable company takes them as base features of their framework, things will begin to become popular and be considered a reasonable option for the corporate sector. And that also helps the entire ecosystem, including open-source.
Pretty great to see this. Finally they got caching right, you tell it where and how to cache something and it just does.
I just hope there will be an eslint plugin to warn you of the things that error out in build, wouldn't mind getting a warning in the editor instead of waiting a few minutes just to get a 'pipeline failed' on github.
Also great to see the cached async function at 24:20, We can just make a function, return some JSX, and it all just works. Getting closer and closer to Dan Abramov's "just copy the code from client and paste it on the server"
Now just waiting for GET server actions/functions and we'll be golden!
26:26 I can't even read so fast as you write with AI! This so cool! Your speed of iteration is of COSMIC SIZE. While I would only create a file, you already wrote all code and run the demo :D
This AI helper is something!
28:50 It is so useful that you are showing the actual workflow of bugfixing! When there is a polished video without any bugs, it feels unnatural!
When I do stuff, I'm getting lots of errors! Cause I frequently do dumb stuff :D And watching how YOU react to error is an amazing experience! Of course, if the bug does not take 10 hours to fix, lol
:D
It's wild that they didn't do this from the start. Opt-in to caching, do not cache by default - and also differently in dev/prod. No wonder there was a lot of confused and annoyed developers.
If Lee Rob talks about it , is that really 'leaking?'
@23:29 The immediate use case for me is when making calls out to external "metadata" endpoints, like oidc well-known config. That is generally cached for 24 hours and now I don't have to worry about doing that basic behaviour myself
Next time they try to hide something they need to try harder
the dev rel guy, 'LEAKED' it
I think they know what they’re doing. They might not care or do it on purpose even? It gives some media buzz and people are more tolerant to bugs. Or what do you think?
Didn’t next 15 just get released and now cache is not default
Getting really into remix. There's a lot I don't like, but everything I don't like about remix is exactly the same things that I don't like about the app router in next.js.
Although, this video highlights one of the exceptions.
Time to look into Tanstack Start
Remix docs sucks
@@noobnessmee yes. Yes they do. Maybe if I reread them again...
I'm a fan of remix, but the lack of middleware is a nonstarter for me. So much copy-paste is required for simple things like authenticated route paths.
@@bruceleeharrison9284 Right now I'm just doing research. I'm trying to port our next.js app that makes heavy use of swr to see how that compares to porting the same project to the page router.
Likely we'll keep using Next.js and the page router for a while, but it's fun to learn new things.
Back to `goto` days then, look for a "use cache" somewhere. I think they are using js directives to simplify build/bundle system, on the other hand they are introducing indirection a lot.
I hope that the directive to enable this new feature is "use \"use cache\""
nextjs 15 soon hopefully really good
i love your videos man
let's pray that they can make it this time
It's launched today
it was launched 10 hours ago lol
@@OP-ig1fj i know bro i commented and saw it lol
i'lll try it tomorrow
I'm super super stoked about Next 15
It's marked as stable now!!!
@@mathesonstep it's marked as stable, but it is really stable?
I just want this "use anti-ddos"
15 already shipped :)
I liked the unstable_function more with only a single downside that it was hard to customize the tags of it since they needed to come from outside of the unstable_cache call. The cacheLifetime and cacheTags seem promising but until they are usable in server functions called from client components it really isn't usable sadly.
Guillermo doing a commit named “founder mode” on a demo app that is not even of a todolist complexity is sooooo cringe. Almost as cringe as Theo saying he is “leaking” and “reverse engineering” nexjs. And not as cringe as Vercel thinking that having less caching code is the way to fix the fact that they gave us not enough control.
>reverse engineering
> j*vascript
pick one
guys just check the web sometimes, nextjs 15 is out.
No mention or comparison with Tanstack Start?
Could you make more videos on reverse engineering? It really helps newcomers to the ecosystem grasp things more easily!
Why we need so much abstraction for just a simple Cache-Control header.
Cache-Control: max-age=10, stale-while-revalidate=20
Does after all this abstraction NextJS generate Cache-Control header like above that can be used by all CDN or some vercel specific magic 🪄.
For on demand revaldation we should be able to declare our own revalidate function where we can send a API request to the CDN provider we are using to delete the cache. It will allow self host it without missing stale-while-revalidate feature.
because next.js xD
Cache-Control header doesnt include ISR and other next specific things
Not sure why the complications myself.
But wait, if you aren't allowed to use headers in a 'use cache', then how do you add a cache tag based on the header values?
Is that still in the "front end" domain ?
theo intro is outdated now :( NextJs isn't quiet anymore, 15 is stable alr
I love this. I unoquivocally love this.
"use suspense" incoming.
What about 'use strict'?
The thumbnail shots remind me of Lucille Ball
Im the only person who likes the new version? I like the stability versions, and this version improves a lot things requested by developers
I’d like to ask those criticizing Next.js for directives like 'use cache', 'use client', and 'use server': while 'use cache' was introduced by Next.js, 'use client' and 'use server' actually came from React. Just like JavaScript’s 'use strict' directive, these aim to enhance performance and enforce best practices. So why single out Next.js for using tools that improve modern web development?
Every time I heard "caching is hard" from other devs I was like "phew, you're overestimating it"...
...Then I implemented adaptive replacement cache for a filesystem one day and realised how annoying this thing is.
Luckily I live in the EU where we don't have software patents, so I was free to just looked up a few US patents for filesystem caching, blatantly steal their ideas and figure out a good middleground.
Hey Theo there is a typo in this uploads description.
I don't want to use nextjs anymore. because it has a big difference between development and production behavior
and it's also pretty tightly bound to the vercel platform
so dont use then
@@jsvrs I don't use it in my projects anymore :)
@@snatvb cool
Its getting better
not caching during dev is the most confusing to me
especially when working with external APIs that have rather strict request limit
29:08 ✅ 🧐👍 worth it
How does one reverse-engineer open-source code?
Big changes again? 😅
I don’t think they are quiet while literally they released yesterday
Nothing I discuss here is in the 15 release notes :)
This doesn't solve caching when you're running multiple instances of the site.
AFAIK, it does as long as you are on Vercel
@@nwsome yeah I mean vercel manages all of that for you anyways right?
Imagine reacting (ie content stealing) from a smaller channel and then trying to bully them when they ask you to stop stealing from them.
Who's the other channel?
@@danielchettiar5670 The theft victim? Honeypot.
30mins???😮
I appreciate you!
so you reverse engineered open source code that's publicly available? 🤔 I don't think that's what reverse engineering means
27:31 Your page is DDOSed by you using an alert(); xD :)))
U A/B testing thumbnails I've gotten 4 different ones
next is a mess (- _ - )
soke
Oof. At 5:30 nobody told Theo that js is perfectly fine and is in general preferred over the jsx extension. Tsx is inescapable and most likely, Theo 's just been in TS land for so long that he assumed the same applies for vanilla js. This is the most charitable viewing of Theo's response I can come up with without doing crazy mental gymnastics
Most IDEs will not recognize JSX syntax if its not in a .jsx file. I dont know how you did these mental gymmastics
Awesome
Sick.
Thank god I use nuxt 😂
Hahaha, how do you use Axios in Nuxt? Tell us! Can we use Axios in Nuxt 3? 🤣 🤣
Awesome video!
😂😂😂 consider browser caching 😅😅😅
They have to use "await" just to know something is dynamic? lol
Stop caching everything by default and let me add caching when I want it. This is so lame. All these weird quirks to work around bad architecture. Worst case scenario just add something inside cookies() to flag it as dynamic if you really need to. Don't force it to be async.
'use cache' to workaround the workaround. smh
How can anyone think this is a good design? The fact that Theo says "I don't know" so many times in this video is proof it is a bad design. Nobody understands how it works or what is cached when unless they make Next.js their entire life. And even then it is just going to change in the next version anyways.
Keep it simple. Let the user opt in to caching when they want and the rest of the time don't do anything.
i enjoyed it
lol, invalidate this video
no no no no no i don't like any 'use [thing]' at all. Do stuff like React Router v7/Remix V3 is. Its so much better.
I used Remix and didn’t find anything particularly special about it. It essentially does the same thing as Next.js’s Pages Router-fetching data on the server and passing it to the UI at the route level. Next.js’s App Router, however, is different; it was designed to adopt React Server Components.
first
react 🤮
first?
let's get an ai agent monitor their github commits 😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅