Beware of "auto" Mode in the NextJS App Router

Рет қаралды 15,704

Jack Herrington

Күн бұрын

Пікірлер: 56

@naught0 5 ай бұрын

Next.js caching is absolutely killing me. Appreciate the breakdown!

@jherr 5 ай бұрын

Caching is radically reduced by default with NextJS 15.

@ivan.jeremic 5 ай бұрын

Thank you so much, Jack, for including the VS Code theme name in the description. This is exactly what I needed at 36 years of age. Very nice theme! :D

@HeyArnold-vu1ol 5 ай бұрын

wait so next 15 removed the default caching for fetches?? so happy to hear this, but man this switching back and forth, on top of the complexities of the app router, is pretty taxing on the dev experience. But thank you Jack for another wonderful video, always appreciate your wisdom. Ill def be getting your course when i have some down time!

@rizanfs 5 ай бұрын

I just had this issue and yet you're magically uploading this video. What a livesaver

@hongshikbrandenkim8387 5 ай бұрын

Thank you from South Korea, clear and concise!

@joeyywill1234 5 ай бұрын

I generally like the app router but this stuff has slowed me down a couple times whilst developing, the cognitive load it takes to remember where things are static or dynamic can be a bit tedious in large apps 😅 anyways rant over -- loved the vid dude!

@hamza_dev 5 ай бұрын

also the fact that now I have to create page.tsx for every single page is a little bit annoying.

@skapator 5 ай бұрын

At this point one could say: Be aware of "Nextjs"

@akiryk 5 ай бұрын

Is the ProNextJS course available yet? I visited and signed up for email, but I'm not clear on the cost, when it will be available, or what it even is, really. What am I missing?

@Kaczucha888 5 ай бұрын

Next is moving so fast and it is so hyped that it will be soon hard to know which sources to trust. Great that we don't have new react paradigm to grasp on, oh wait RSC

@FeFeronkaMetallica 5 ай бұрын

I am glad I switched to Remix

@jherr 5 ай бұрын

I'm not so sure that's a safe bet if you keep up with what's happening with React-Router 7. From their blog posts they state that embracing RSCs are creating some fundamental breaking changes.

@paweciosek489 5 ай бұрын

Thanks for the great explanation! Reverting back to not cached fetch could be interesting, it's good direction 👏. Vercel should take it as a lesson of doing more mature analyze before making the project decisions 🙏

@RyanRampersad 5 ай бұрын

Good video! I haven’t upgraded my next app from pages/ to app/ router yet, so I haven’t have an opportunity to try these new patterns. I always find defining these magic constants or functions in a file so strange, like there’s no interface or other hints that it’s possible. Thanks again!

@jherr 5 ай бұрын

In a way GSSP and GSP in pages are “magic” functions.

@yashsolanki069 5 ай бұрын

@@jherr that's true😂 It's like they removed GSSP and GSP and introduced the default SSR component in v14.

@Mirislomovmirjalol 5 ай бұрын

i think best solution for the issue that mentioned in video would be using client side data fetching for places like navigation menu. maybe i am wrong but you can force cache that page and fetch data on client side. the result gonna be dynamic because you fetching it on browser not in the server. am i right?

@null_spacex 5 ай бұрын

That’s right but making the nav dynamic while the page is static really isn’t that hard imo

@bojanarcon5418 5 ай бұрын

Thanks for sharing 🤘I love to watch your videos Also, I think you made a mistake 10:20/12:26 because you were saying about we don't want caching but yet you removed "no-cache" flag. So, you were saying right, but doing the oposity. Am I right?

@jherr 5 ай бұрын

Yeah, you are right. I flipped back and forth between cached and non-cached so much that I just missed that one.

@gabrielbianchi2246 5 ай бұрын

I think it was relatively bad timing to release this video just before next 15 and the fetch api patch

@benardallotey 5 ай бұрын

Hi Jack, Do you still use Operator Mono as your font? It doesn't look like that is the font being used?

@jherr 5 ай бұрын

I use JetBrains Mono now.

@farrela.846 5 ай бұрын

Hey jack. Is it possible to create a static page which contains dynamic component? Let's say there's a home page of an app where most of the stuff can be statically rendered and only one dynamic component (e.g. via the use of cookies() to access cookies). Does the whole page needed to be dynamically rendered? Or can we isolate the dynamic rendering only for that one component? Much appreciated

@jherr 5 ай бұрын

In general? Not if you need cookies, no. And that's not a NextJS specific limitation. If you want to access cookies then you have to be running on a server or a serverless function. You can do partial pre-rendering with NextJS though. Where you pre-render part of the page, and then send that out quickly upon initial request. And then you follow up with sending out the suspended components which are either RSCs or client components. And those could access cookies.

@rayhanislam7518 5 ай бұрын

what is connection timout in nextjs 13/14 in deploy on was ec2? and how to solve it?

@TheRubiosMusic 5 ай бұрын

How do one access your courses? I went to the page but could only see the free ones. Is the paid side of the website not available yet?

@jherr 5 ай бұрын

We are just now in post-production.

@TheRubiosMusic 5 ай бұрын

@@jherr Looking forward!

@Beast80K 5 ай бұрын

Respected Sir, thank you this crystal clear explanation. I'm experiencing a problem with route handlers, I have an external API which my NextJS route handler calls to get data, but despite external API returning 503, 429, etc. after revalidation period NextJS returns old cached data when response status is error (400s, 500s). It never returns the error response. So what's the solution for this ?

@jherr 5 ай бұрын

You can set the dynamic to `error`, perhaps that's what you are looking for.

@Beast80K 5 ай бұрын

@@jherr *Respected Sir, Thank you* once again but this didn't solve the problem. I was expecting NextJS to cache any (200s, 400s, 500s) responses received from external API, & serve them to all users who hit those APIs until revalidation period. Currently I implemented a NodeJS + ExpressJS server with caching, rate limiting etc.

@jherr 5 ай бұрын

@@Beast80K Ok, well, just take your express code and drop it into the event handle. Req and Res are the same.

@Beast80K 5 ай бұрын

@@jherr I'm extremely thankful & appreciate the time & effort you took for this question. For caching I'm using a ExpressJs based library called *api-cache* . If you are still interested in this question then you can find it on StackOverFlow by question name as *NextJS 14 returns old cached data despite external API returns error response after revalidation period?* & also I have provided extra details & explaination. Once again *Thank you !*

@ksub123 5 ай бұрын

Hi, not sure what Im missing but I do not see any paid course on pronextjs. Let me know where I can find it. Thanks.

@jherr 5 ай бұрын

@mj95412 5 ай бұрын

Keep up the great work Jack

@AbstruseJoker 5 ай бұрын

All these weird quirks is what keeps me from moving to app router

@carvierdotdev 5 ай бұрын

❤

@furycorp 5 ай бұрын

Beware of NextJS if you want to build your app without having troubleshoot the consequences of the young NextJS team learning Y2K-era web development lessons!

@null_spacex 5 ай бұрын

Get with the times boomer!

@furycorp 5 ай бұрын

@@null_spacex I moved most of my NextJS projects to Astro w/ React (reusing the same components) and couldn't be happier - both SSG + SSR. There's a small learning curve with the islands architecture (e.g. islands will break context) but overall I can keep up-to-date way faster and easier and there is no need to rewrite to stay current with even minor version releases.

@null_spacex 5 ай бұрын

@@furycorp Yeah I moved some projects to astro, some of them still are but now I've been back on Next. It's not that had for me to keep up and I enjoy keeping up to date with next. Not any reason to rewrite if you don't want to. Even pages still work.