Caching should be opt-in, not opt-out. Same thing for env variables which are consumed at build time. We have apps that read from remote configurations when they start, and this created issues because the config is also read at build time. Having static data is great! But the cache control in Next is quite frustrating.
@@janglad9136 we use the "publicRuntimeConfig" to store these values. For some reason, Next does not transform process.env.* from this file, then we import "next/config" and get the public runtime config from it. With some tweaks, this can even be typed. But it's certainly ugly. Another solution would be to import env variables with a module like env-var.
I think this is also a feature that should be opt-in not opt-out. This issue is compounded by how NextJS overrode fetch for doing caching. In addition that this is an after thought for opting out with the unstable_nostore and the different ways they do the export for forcing dynamic. This also doesn't seem to work consistently. The combinations of these assumptions for caching are what cause a lot of mistakes by new NextJS devs. The lack of tooling for discovering these, lack of global configuration for opting out really does mean it is broken.
I was just having a problem related to this topic and your video helped me grasp the concept behind it , leading me to properly understanding and fixing the problem, thanks 🤝
+ if you use soft navigation with then it introduces even more "unexpected behaviour for the developer". There is still a 30 second cache you cannot opt out of, even with noStore()
@@yehaa00 I once used next 13 with react-icons, it litreally used around 4gb+ ram for no reason and kept constantly crashing, I never feel comfortable using next
Hi Dave! Your videos are absolutely amazing! I am currently digging into secure web protocols, I wonder if you can make a video of how to prevent or mitigate attack on a web application. Thank you.
Great video. I recently ran into this issue when using the T3 stack. T3 was throwing a DYNAMIC_SERVER_USEAGE error during builds and noStore() solved it. I'll be honest, I didn't understand why it worked, but it did.
Dave, you are always on point. I see that you are not affiliated with any frameworks like other youtube influencers. Thanks again for your unbiased opinion and bringing the issue up. Next.js is good but not perfect.
Routing, both Links and programmatic. Also, if you wanna map an array, and return a conditional check on the array, before rendering, but you want to to wrap in an empty container for styling reasons, it needs a key… forcing you to use the div, breaking styling. Also there should be a way to optionally pass state from a layout to the pages that use the layout.
I was one of those who always see your videos but never comment or subscribed. Today I subscribed. I like your videos as you tries to show the real-life scenarios through your codes. One humble request. Can you please make a tutorial for nextjs with really complex form handling with array files uploading and designing such API or components. Thank you
Just about to refactor a BIG production app because the devs preferred clean imports but Next doesnt tree shake properly! Talking about 1 minute build time for a page. Using turbo!
Nice content as always. I just wanted to ask if your next JavaScript course, the one covering version 13, is still suitable considering the recent upgrade to version 14. thanks ^^
I understand what you're saying. For more information on why it works this way, I suggest watching this video: 'Next.js App Router Caching: Explained!' I believe realizing a different behavior between 'dev' and 'prod' only at the project build time indicates a lack of investment in reading the official documentation!
I only tried Next.js a couple of times and could not figure out why dev/production didn't sit right with me. I've settled on Astro and it's a much, much better experience.
There are really a lot of errors in the next build, and there's no helpful error message. I encountered errors even though I did nothing. I had to recreate my project because, for some reason, every import wasn't working.
I also wanted to start my new project in Next14 but i found no documentation to use existing backend api. I want to use my existing nodejs apis and also want to manage authentication using that but i cannot find any article related to frontend only next 14 project.
@@kayodeadechinan5928 Do you mean that i should call my existing apis from nextjs server apis. But wouldn't that make two request for 1 thing. 1st request from frontend to next server api and 2nd request for nextjs server api to My existing apis. As my existing api project is very big so i cannot rewrite those api in nextjs server apis. So i need a way to call them from frontend. And i want to manage its jwt authentication in nextjs
NextJS simplifies many React stuff like routing and giving us ability to use server side middleware's/end-points instead of "external server" like Nodejs but it does complicate other things as well shown in this video and documentation while is great also lacks. I hope Vercel figures these problems out and brings Next to the next level like Google did with Angular or PHP with newest PHP 7+. I choose to use Next thanks to SEO, better peformance compared to React, simplified router, server side components and ofc NextAuth which is great other than that Vercel needs to work on Next more. I still believe for more complex projects, Angular + Springboot or C# is the best.
*Respected Sir,* I'm experiencing a weird problem with API route handlers, my API route gets data from external API (locally hosted using mockoon tool), I'm using *{ next: { revalidate: 60} }* to get fresh data after 60 seconds & also *'force-dynamic'* to prevent it from becoming static during build. External API returns errors like 404, 429, 503 but API route handler responds with cached data & never returns a error, even other errors caught in catch block are ignored. Any suggestions ?
@@DaveGrayTeachesCode Yes I did apply 'force-dynamic' & { next: { revalidate: 60} }, but my API route handler never returns error responses, instead it gives cached data(which was 200 status) ignoring external API's error responses (404, 429, 503) . Can anything be done ?
I give up with nextjs after dealing with a server action cache bug for the last two days. My app behaves differently on Vercel than the local build, there are countless cache issues open on github for months. It is mind boggling that caching is default. I will try Remix or Svelte for my next app
I have one question when we work in next js and node js then nodejs devloper send token in response then we can get it in client side then how we can protect page in middleware using server side because next js middleware run on server
I'm getting wierd error that i can't track down , in dev mode is perfect but when I build at generating static page stage I'm getting errors , i started my project with bun when I try to run it with node getting module not supported use common js ... I don't know wtf is happening I'm not building a server here , it's jamstack app and it's fully frontend
@@bryanlee5522 It's not a clickbait title, it's a real issue. Some of the same developers who made React a cluster fuck are literally in NextJS now in important roles. We're gonna see a similar trend with NextJS in the future, despite it currently being a "go-to" solution.
nextjs has other issues like using docker in dev on windows needs a polling hack, development is quite slow af, & a host of other issues that don't exist in other frameworks like remix. i have switched over to remix & its been such a breeze compared to the shitshow next.js is. still have 1 next.js app & 1 remix app so the difference is quite astounding. i've heard nuxt is even better but i dont wanna learn vue for now although should be quite easy. vue 3 + pinia + nuxt honestly sounds like a dream but hopefully remix & react (maybe millions) can & should catch up.
Same with revalidate time works perfectly in dev it caches data for specified time then it fetches new content However it doesn’t work in production it always shows old data even after second reload when revalidate time has passed.
I had some work experience with React, and recently I have started learning Next.js a side project. I like the file structure and the dynamic routing, but I the other day got hit pretty hard by trying dockerizing my Next.js App. Apparently, the offical docs says we can use {output : standalone} to reduce the size of the image, which I never succeed after scouting the internet for a day. Comparing my nginx+react 50MB image, I wasn't able to make a running Next.js image with
@toparamennoodles9652 numbers speak volume. Next is not as popular as it's hyped on TH-cam. Yes it has nice features but it can be pain to get some things running in production.
Next.js is getting complicated each update and a lot of band aid solution. I'll probably switch to a more stable and non vendor lockin framework like remix or sveltekit
+1 will switch to SvelteKit or SolidStart as any of them becomes stable. Also considered Remix but it's still React and React deserves to be ditched as well ;)
So its SSG without noStore ?? And adding no store it becomes SSR with no caching ?? And if we use the "use-client" its CSR ? Please let me know if this is correct
There are a variety of ways to make it dynamic aka SSR. I show some of them including "force-dynamic" route config and noStore. "use client" does indicate client-side rendering, but be aware that the first render of client components also happens on the server.
By far the most frustrating part of nextjs has to be the slow & sluggish dev server. Its just unbearably slow. I just really hope turbopack arrives soon. BTW awesome content as always. Thanks Dave.
i have noticed on nextjs14 when using react query on development on the first time i open the localhost the site has problems with loading the content incoming from react query, to fix i just refresh the page. Luckily on production this doesnt occur
Do anyone know a next.js website that utilizes react server actions and has a crud type response time close to 100 or even 200ms? Would love to see it. Thanks.
I was wrong.... Middleware works with node.js...Tested with 14.1 on Hetzner Ubuntu ARM VM Original Comment: (this is wrong) Why don't middlewares works with nodejs??? This makes self hosting difficult
What do you mean? I run multiple Next.js apps self hosted and never had problem with next.js middleware. I don't run it on Vercel or any specialized provider. Just in a VM running with Node.js.
This is missing a few things but it is hard to sum up in one sentence. Others may want to know why it does what it does, the reason for the static content, where to find the build reports, and why other devs feel this way.
@@DaveGrayTeachesCode i might have sounded too harsh there, sorry for that ...i m sure your video has value to your viewers ..i just get triggered by these video titles where its sounds like something interesting and then its something like this
IMO nextjs app router should only be different from pages router by nested pages(layouts and grouping) resolution Rest of features they got only distract and harm devs day-to-day job We aren't building static websites with server components. We are building dynamic apps. Stop making php with wordpress with this BS
This is not a NextJS problem, it's a waterfall query and dependency propagation problem. Next.js and React tried to solve this by using a cache, so don't overreact to this feature. Instead, be better informed.
Oh so sad people starting to become like a ROBOT and dedicating there whole life building a useless thing called WEBSITE looking at the computer screen for hours straining their eyes.... they should ESCAPE THE MATRIX INSTEAD 😢😢😢😢😢
Caching should be opt-in, not opt-out. Same thing for env variables which are consumed at build time. We have apps that read from remote configurations when they start, and this created issues because the config is also read at build time. Having static data is great! But the cache control in Next is quite frustrating.
Many agree with this! 🙌
Out of interest, how did you solve the issue with the environment variables? Could you solve it by running a pre build script?
@@janglad9136 we use the "publicRuntimeConfig" to store these values. For some reason, Next does not transform process.env.* from this file, then we import "next/config" and get the public runtime config from it. With some tweaks, this can even be typed. But it's certainly ugly. Another solution would be to import env variables with a module like env-var.
I think this is also a feature that should be opt-in not opt-out. This issue is compounded by how NextJS overrode fetch for doing caching. In addition that this is an after thought for opting out with the unstable_nostore and the different ways they do the export for forcing dynamic. This also doesn't seem to work consistently.
The combinations of these assumptions for caching are what cause a lot of mistakes by new NextJS devs. The lack of tooling for discovering these, lack of global configuration for opting out really does mean it is broken.
Amen to this guy
I was just having a problem related to this topic and your video helped me grasp the concept behind it , leading me to properly understanding and fixing the problem, thanks 🤝
Glad it helped!
+ if you use soft navigation with then it introduces even more "unexpected behaviour for the developer". There is still a 30 second cache you cannot opt out of, even with noStore()
Only recently found your channel. Amazing tutorials. Thank you.
Welcome aboard! 🎉
those who aren't subscribed to your channel are really missing out
Normally, the code works in the development phase, but gives an error in the production phase. The opposite happens in next.js.
Their hot reload thing needs to be fixed
@@yehaa00 I once used next 13 with react-icons, it litreally used around 4gb+ ram for no reason and kept constantly crashing, I never feel comfortable using next
@@thatsalot3577 seriously man.. thats an issue, with 16gb ram still dev server sometimes crashs or takes time to render🤧🤧
Hi Dave! Your videos are absolutely amazing! I am currently digging into secure web protocols, I wonder if you can make a video of how to prevent or mitigate attack on a web application. Thank you.
Great video. I recently ran into this issue when using the T3 stack. T3 was throwing a DYNAMIC_SERVER_USEAGE error during builds and noStore() solved it. I'll be honest, I didn't understand why it worked, but it did.
this is why I moved to Remix, you have way more freedom on how you want things to work.
Dave, you are always on point. I see that you are not affiliated with any frameworks like other youtube influencers.
Thanks again for your unbiased opinion and bringing the issue up. Next.js is good but not perfect.
I appreciate that!
Can't explain better than this! Awesome video!
a few things broken with next.js
'use server' = declare action (API)
import server-only = use server for this only
'use client' = hydrate
I started using Remix and it’s so cool and much less complicated then NextJs
Opinions vary but you are not the only one to feel this way for sure.
still waiting for their middleware 🙃
Routing, both Links and programmatic. Also, if you wanna map an array, and return a conditional check on the array, before rendering, but you want to to wrap in an empty container for styling reasons, it needs a key… forcing you to use the div, breaking styling. Also there should be a way to optionally pass state from a layout to the pages that use the layout.
I was one of those who always see your videos but never comment or subscribed. Today I subscribed. I like your videos as you tries to show the real-life scenarios through your codes. One humble request. Can you please make a tutorial for nextjs with really complex form handling with array files uploading and designing such API or components. Thank you
Just about to refactor a BIG production app because the devs preferred clean imports but Next doesnt tree shake properly! Talking about 1 minute build time for a page. Using turbo!
Last time i watch dave's video, he was just 50k subs. Now he's at whopping 272k subs. I'm so proud of you dave!
Thank you!
subscribed!! this is some great stuff Dave, thanks for sharing with us!
Welcome!
Nice content as always. I just wanted to ask if your next JavaScript course, the one covering version 13, is still suitable considering the recent upgrade to version 14. thanks ^^
Yes all concepts still apply because it also uses the app router. Do take note of the version I use for each chapter.
Xxxx
X is
Very helpful, thank you Dave!
You're welcome!
Thanks for covering this amazing content as always
Glad you enjoy it!
why you put the dynamic context inside static context and inject the noStore? I would move the dynamic one out of the Page scope 😮
I understand what you're saying. For more information on why it works this way, I suggest watching this video: 'Next.js App Router Caching: Explained!' I believe realizing a different behavior between 'dev' and 'prod' only at the project build time indicates a lack of investment in reading the official documentation!
Thank you for the great explanation and sharing!
I only tried Next.js a couple of times and could not figure out why dev/production didn't sit right with me. I've settled on Astro and it's a much, much better experience.
Awesome vid. Next.js doesn’t leave anyone indifferent.
It's not broken. It's a different perspective with its own reasoning. Broken is a strong word.
god this saves me alot of headache, thank you, export const dynamic would not work for me at all
Extending fetch is a terrible idea too
Others share this opinion, too.
Build videos on remixjs
There are really a lot of errors in the next build, and there's no helpful error message. I encountered errors even though I did nothing. I had to recreate my project because, for some reason, every import wasn't working.
please dont tell me we will have to leave it after i leaned it
oh just complete the vid, you are awseome dave
Thank you!
I also wanted to start my new project in Next14 but i found no documentation to use existing backend api. I want to use my existing nodejs apis and also want to manage authentication using that but i cannot find any article related to frontend only next 14 project.
why would you need an article for that ? If you already have your api, just use it where you would normally call your db stuff in next 14.
@@kayodeadechinan5928 on other way, How could this section is hided from docs? I'm sure 90% dev don't use Next as API
@@kayodeadechinan5928 Do you mean that i should call my existing apis from nextjs server apis. But wouldn't that make two request for 1 thing. 1st request from frontend to next server api and 2nd request for nextjs server api to My existing apis.
As my existing api project is very big so i cannot rewrite those api in nextjs server apis. So i need a way to call them from frontend. And i want to manage its jwt authentication in nextjs
Thank you for sharing!😊
Did you try leveling the bed?
NextJS simplifies many React stuff like routing and giving us ability to use server side middleware's/end-points instead of "external server" like Nodejs but it does complicate other things as well shown in this video and documentation while is great also lacks. I hope Vercel figures these problems out and brings Next to the next level like Google did with Angular or PHP with newest PHP 7+. I choose to use Next thanks to SEO, better peformance compared to React, simplified router, server side components and ofc NextAuth which is great other than that Vercel needs to work on Next more.
I still believe for more complex projects, Angular + Springboot or C# is the best.
After nextjs16, nextjs will make us wrap everything inside Suspense so that it doesnot break code in production.
*Respected Sir,* I'm experiencing a weird problem with API route handlers, my API route gets data from external API (locally hosted using mockoon tool), I'm using *{ next: { revalidate: 60} }* to get fresh data after 60 seconds & also *'force-dynamic'* to prevent it from becoming static during build. External API returns errors like 404, 429, 503 but API route handler responds with cached data & never returns a error, even other errors caught in catch block are ignored. Any suggestions ?
Yes you need to use the force dynamic segment config like I show for server components in this video. A round handler is also a server component.
@@DaveGrayTeachesCode Yes I did apply 'force-dynamic' & { next: { revalidate: 60} }, but my API route handler never returns error responses, instead it gives cached data(which was 200 status) ignoring external API's error responses (404, 429, 503) . Can anything be done ?
I give up with nextjs after dealing with a server action cache bug for the last two days. My app behaves differently on Vercel than the local build, there are countless cache issues open on github for months. It is mind boggling that caching is default. I will try Remix or Svelte for my next app
this is what I call a quality content!
I have one question when we work in next js and node js then nodejs devloper send token in response then we can get it in client side then how we can protect page in middleware using server side because next js middleware run on server
I'm getting wierd error that i can't track down , in dev mode is perfect but when I build at generating static page stage I'm getting errors , i started my project with bun when I try to run it with node getting module not supported use common js ...
I don't know wtf is happening I'm not building a server here , it's jamstack app and it's fully frontend
What's the difference between this noStore and revalidatePath?
the moment i learn new framework it gets broken/outdated or there is a better alternative...like why me god 😭😭
next.js is still the go to react framwork and will be for the foreseeable future. its just a clickbait title
@@bryanlee5522It is unfortunately
@@bryanlee5522 It's not a clickbait title, it's a real issue. Some of the same developers who made React a cluster fuck are literally in NextJS now in important roles. We're gonna see a similar trend with NextJS in the future, despite it currently being a "go-to" solution.
nextjs has other issues like using docker in dev on windows needs a polling hack, development is quite slow af, & a host of other issues that don't exist in other frameworks like remix. i have switched over to remix & its been such a breeze compared to the shitshow next.js is. still have 1 next.js app & 1 remix app so the difference is quite astounding. i've heard nuxt is even better but i dont wanna learn vue for now although should be quite easy. vue 3 + pinia + nuxt honestly sounds like a dream but hopefully remix & react (maybe millions) can & should catch up.
Same with revalidate time works perfectly in dev it caches data for specified time then it fetches new content However it doesn’t work in production it always shows old data even after second reload when revalidate time has passed.
Same problem here mate. Do you know how to solve it? Cheers.
@@broskidamn I tried solving but didn't work so I have opt out cache simply setting revalidate to 0 and it works
it will work if u use "use client"
The timestamp example will work, but that is missing the point. The topic here is how dev mode and production are different.
this was very helpful
I had some work experience with React, and recently I have started learning Next.js a side project. I like the file structure and the dynamic routing, but I the other day got hit pretty hard by trying dockerizing my Next.js App. Apparently, the offical docs says we can use {output : standalone} to reduce the size of the image, which I never succeed after scouting the internet for a day. Comparing my nginx+react 50MB image, I wasn't able to make a running Next.js image with
Vite + react router dom and some state management makes wondeers.
Use astro and you will get SSR
@toparamennoodles9652 numbers speak volume. Next is not as popular as it's hyped on TH-cam. Yes it has nice features but it can be pain to get some things running in production.
remix ?
@@lamhung4899 only good thing we have is Remix..I hope it gets RSC. I think we will get it by 4th quater or early 2025 stable support
@@jitxhereVite has SSR too
Next.js is getting complicated each update and a lot of band aid solution. I'll probably switch to a more stable and non vendor lockin framework like remix or sveltekit
It's worth trying them all out and finding what you like best.
+1 will switch to SvelteKit or SolidStart as any of them becomes stable. Also considered Remix but it's still React and React deserves to be ditched as well ;)
Thank you Dave
So its SSG without noStore ?? And adding no store it becomes SSR with no caching ?? And if we use the "use-client" its CSR ? Please let me know if this is correct
There are a variety of ways to make it dynamic aka SSR. I show some of them including "force-dynamic" route config and noStore. "use client" does indicate client-side rendering, but be aware that the first render of client components also happens on the server.
@@DaveGrayTeachesCode But am I right with the SSG part tho ??
Also if we have to make it ISR, we have to use something related to revalidate ?
@@razorflash__ there's a lot to learn. I've got videos. Check the docs too. You are on the right track.
@@DaveGrayTeachesCode I have seen your ssg, isr vid in next 13, although am yet to see all of it. Thank you 👍
Skill issue. The example doesn't resemble real world use case, and it's easy fix by changing directives or even writing stuff in different components.
Yeah I don't like to make examples complicated. It takes away from the discussion at hand. The example did clearly show what was happening. YMMV
By far the most frustrating part of nextjs has to be the slow & sluggish dev server. Its just unbearably slow. I just really hope turbopack arrives soon. BTW awesome content as always. Thanks Dave.
It got so much faster
midlleware cant use node runtime is really 。。。。。。。。。。。。。。。。。。。。。。。
i have noticed on nextjs14 when using react query on development on the first time i open the localhost the site has problems with loading the content incoming from react query, to fix i just refresh the page. Luckily on production this doesnt occur
Such a shame that they couldn't fix this big issue.
Why not just use remix?!
Many feel the same.
thanks for this info.
Glad it was helpful!
I find it good that it's opt out
Do anyone know a next.js website that utilizes react server actions and has a crud type response time close to 100 or even 200ms? Would love to see it. Thanks.
your tutarials are excellent. why don't you make tutorials in Blazor?
Thank you. I do not have experience with Blazor. Claudio Bernasconi has a channel with videos about it.
Thanks dad
Tell your mom hi
That's why I switched to VueJS.
"Should be finished in just a second" lol, it's taking ages.
A testament to disappearing attention spans. 😆
If John Wick was blonde 😎 Great video, Dave
I'm in a much better space since I stopped using nextjs
What do you use instead?
I still think that caching should be opt-in behaviour 🙃
Many share this opinion!
It's like the baby out of the oven gets less care 😂
Just write in plain react and you should be good
It's not a problem. The problem is when you don't know the tool you are using.
Thank you
Whats the secret to the prince charming hair bro
Being committed to grow it while you can lol
Is it only me who thinks that calling statically generated pages “cache” is a bad idea to begin with?
youtube algorithm 🚀
just use remix
Many of the comments agree with you.
ngl you had me until that lowercase `page` function
haha, you can name it anything you want. The file needs to be named page though.
this nextjs things are overwhelming for me T_T
vue >>> react
Use vite with nextui. No need nextjs all way
I've never used next, but there are so, so many complaints about caching. Seems like a big oversight
Many feel the same way
I was wrong.... Middleware works with node.js...Tested with 14.1 on Hetzner Ubuntu ARM VM
Original Comment: (this is wrong)
Why don't middlewares works with nodejs??? This makes self hosting difficult
Why do you think? thats what you get when You work with a framework created by a hosting company.
Ya enough of it. Switching to Astro@@o_glethorpe
@@o_glethorpe vendor lock-in at it's finest
What do you mean? I run multiple Next.js apps self hosted and never had problem with next.js middleware. I don't run it on Vercel or any specialized provider. Just in a VM running with Node.js.
update: just hosted it and middlewares works fine...Need more testing from my side..... I have corrected my comment@@rand0mtv660
With this content I will give you 1 like and 1 sub
It's not broken. It's a feature.
/s
Very nice
if you wanna spare 10 minutes of your life:
"next caches during production build unless you tell it not to do that as clearly said in documentation"
This is missing a few things but it is hard to sum up in one sentence. Others may want to know why it does what it does, the reason for the static content, where to find the build reports, and why other devs feel this way.
@@DaveGrayTeachesCode i might have sounded too harsh there, sorry for that ...i m sure your video has value to your viewers ..i just get triggered by these video titles where its sounds like something interesting and then its something like this
@@11WicToR11 thanks for the reply. What is interesting to one may not be to another. You can tell from the various comments.
Not sure if backend development is this hacky
IMO nextjs app router should only be different from pages router by nested pages(layouts and grouping) resolution
Rest of features they got only distract and harm devs day-to-day job
We aren't building static websites with server components. We are building dynamic apps.
Stop making php with wordpress with this BS
Skill issue, not NextJS issue.
Basically skill issue
This is not a NextJS problem, it's a waterfall query and dependency propagation problem. Next.js and React tried to solve this by using a cache, so don't overreact to this feature. Instead, be better informed.
Please get a haircut….. im so not used to it lol
Nope.
What a total mess
Awesome ❤
Oh so sad people starting to become like a ROBOT and dedicating there whole life building a useless thing called WEBSITE looking at the computer screen for hours straining their eyes.... they should ESCAPE THE MATRIX INSTEAD 😢😢😢😢😢
breh
Bro watched Andrew tate once lol
An he said that while using...you guessed it... a WEBSITE !
@@samydjemai927 Its an app. Not a website. Not a blog. Its an app
@@samydjemai927 he could've used the app.