I Hate Next.js 13 Caching Even More Now

  Рет қаралды 30,420

Josh tried coding

Josh tried coding

10 ай бұрын

I prefer Next over all the other frameworks. Makes me and many others insanely productive. But caching in Next.js 13? Aw man it sucks. Glad they acknowledge the problem with their article, but it's really frustrating.
Article: nextjs.org/docs/app/building-...
-- my links
Next.js SaaS: splitter.gg
Discord: / discord
My GitHub: github.com/joschan21

Пікірлер: 215
@WebDevCody
@WebDevCody 10 ай бұрын
Senior engineers: premature optimization is the root of all evil Next team: let’s cache eVeRYtHiNg
@trebturner
@trebturner 10 ай бұрын
Reminds me of that quote "There are only two hard things in Computer Science: cache invalidation and naming things"
@kasvith
@kasvith 10 ай бұрын
Better, lets add 4 caches and make them wonder which one has the problem
@yomaru_1999
@yomaru_1999 9 ай бұрын
absolutely right
@rafaveggi
@rafaveggi 5 ай бұрын
​@@trebturner"there are only two hard things in CS, naming things, cache invalidation and off-by-one errors"
@dan_____
@dan_____ 10 ай бұрын
Josh, I believe all these issues are popping out because react (and by implication nextjs) is moving to a full stack solution. It will get better in time, but at the moment they are stuck on reinventing the wheel and catching up with solid libs/frameworks that have been around for years. I come from a react + express background and everything was working just fine. I decided to pick up nextjs because of SSR. I've since only used nextjs for its file system based routing and SSR and won't attempt to use anything else it has to offer for at least 5 years until the technology has matured enough. Regarding this caching issue... you basically want the random number to be different on every page hit, regardless if its a reload or a navigation. I'm pretty sure that means it has to be a client component with the default rendering strategy (initial server side render into hydration on the client). From my (maybe limited) experience, I've noticed that as long as you don't go too deep into nextjs then everything works pretty ok. If the component doesn't render static html, then it's probably not supposed to be a server component.
@trebturner
@trebturner 10 ай бұрын
Honestly this. I feel like some people are still confused when to use client vs server components and how next/link is inherently a client utility. Didn't matter in the pages dir because everything was fetched from client, but now we that we are fetching from server you should probably use an a tag or change to a client component.
@joshtriedcoding
@joshtriedcoding 10 ай бұрын
Well said man! Yeah this makes sense. Innovating as much as these people do inevitably leads to stuff like this, and it's not a huge deal either. Wish they can make this stuff more clear, other than that next is just an incredible tool
@trebturner
@trebturner 10 ай бұрын
@joshtriedcoding couldn't agree more! Definitely needs to be documented even if it's just to remind people. Love the direction they are headed though
@aristide_F
@aristide_F 10 ай бұрын
@@trebturner you just happened to remind me me that next/link is inherently a client utility. Thanks. I always forget.
@WebDevCody
@WebDevCody 10 ай бұрын
@@trebturnerwe should never be using an a tag in next. An a tag reloads the entire route which defeats the optimizations next provides with prefetching. Each page should have an option to just be a fresh load every single time. The moment you build any interactive application with the app router it feels like a giant hack imo. Caching issues, client component props not updating when calling router.refresh. Parallel layouts not showing loaders correctly
@trebturner
@trebturner 10 ай бұрын
The component should be a client component when you use next/link and want refetch server data. I think the Nextjs team just needs to clarify this.
@8koi245
@8koi245 10 ай бұрын
that's interesting behavior, and yeah the must add that to the docs
@lapulapucityrider3227
@lapulapucityrider3227 10 ай бұрын
But still the back button shows cache, even you do all force dynamic etc. since they cache it for 30s regardless if you apply all their methods to clear cache
@RossanoMontori
@RossanoMontori 10 ай бұрын
I've shipped a couple of projects in nextjs 13 now, my solution to this problem was to implement my own Link component for hard refresh. changeRoute = (url) => { router.push(url); router.refresh() } This way, at least worked all the times. I really didn't bother much about this "bug" because i was quite never needing this. But i totally agree with the concept that this example should be on a client component to do it in the right way. I made my own doc about it, if it's dynamic but doesn't come from a fetch then use a client component. In some cases the right alternative would be to create a route api to generate the data and then fetch it.
@RegalWK
@RegalWK 10 ай бұрын
Yes! That exactly what I thought I would do in that kind of scenario (like the movie) route handler/server action or client comp (but I would go for route handler since I don’t need state operations / web APIs)
@rentatter_4529
@rentatter_4529 8 ай бұрын
You just saved my life. Thank you! I had recently deployed an application using vercel and NextJS v13 and was panicking when recently added data through the client side was not immediately reflected in the front-end. I double-checked whether data was added or not in my MongoDB database and sure it was recorded. I avoided both client-side and server-side caching by the help of your video. Thank you!
@LeprekusGaming
@LeprekusGaming 10 ай бұрын
I found the cleanest solution to be just wrapping that piece of code in a client component. So everything works the same, and you are able to successfully re-render only that part of the page without doing any fancy workarounds.
@Luxcium
@Luxcium 10 ай бұрын
5:25 I love when Josh remembre when he was coding in PHP 20 years ago circa 2003
@CistiC0987
@CistiC0987 10 ай бұрын
Yeah, like 20 years ago him as a baby already stepping through xdebug breakpoints 🤣
@joshtriedcoding
@joshtriedcoding 10 ай бұрын
@@CistiC0987 hahahah
@tremblben
@tremblben 10 ай бұрын
The core problem for me seems to be that NextJS is built around static generation for docs, blogs or e-commerce. As soon as you have something more dynamic, it's hurting more than it helps.
@andreas_bergstrom
@andreas_bergstrom 10 ай бұрын
Yep, people using Next to build more app-like stuff should really just use React with Vite...
@zzzyyyxxx
@zzzyyyxxx 10 ай бұрын
Not really, Josh just missed that it should be a client component, not a server one. At our company we have a huge interactive web app all in NextJS, works fine.
@tremblben
@tremblben 10 ай бұрын
@@zzzyyyxxx Oh it can work fine for sure! I should have specified I was referring to React Server Components. If you're not using RSC and keep the bulk of the code on the client, then you're just doing React. I like using NextJS for the nice dev experience though, had my fair share of webpack configs and shit 😂.
@sheikhtahamaroof8484
@sheikhtahamaroof8484 8 ай бұрын
hey man, I am getting better at next and things are getting difficult, videos like your really help. Please keep posting it's really helpful.
@alexandru-gabrielmanea4495
@alexandru-gabrielmanea4495 10 ай бұрын
Having you explain all of these for someone that had to research the answer of this problem 7 months ago, when these information were not even fully released, it’s great. Could you please try to do a short video on what could be the available quickfixes for this issue at this moment? Thanks, love your videos.
@spencer5051
@spencer5051 10 ай бұрын
//Here's a solution that runs every time you navigate to a page causing the cache to be refreshed. Found it on someone's twitter. "use client" import { useRouter } from "next/navigation" import { useEffect } from "react" export function ForceRefresh() { const router = useRouter() useEffect(() => { router.refresh() }, []) return }
@LeprekusGaming
@LeprekusGaming 10 ай бұрын
I found the best solution is to just move it to a client component.
@spencer5051
@spencer5051 10 ай бұрын
@@LeprekusGaming This is a solution that doesn't require refactoring and still has any advantages you're utilizing from RSC afaik. You can do it any way you want.
@codewithguillaume
@codewithguillaume 8 ай бұрын
This... is probably the best explanation I found on caching with Next.js 13. Thanks Josh!
@yeongjong9395
@yeongjong9395 10 ай бұрын
Josh, thank you so much for the explaination. Perfect timing!!!!!!
@dextorn
@dextorn 10 ай бұрын
You have to import dynamic from next for it and use {ssr: false}. But you gotta use the {Math.random()} as a component. After that you can see the magic. 👍
@aristide_F
@aristide_F 10 ай бұрын
Oh really ?
@aristide_F
@aristide_F 10 ай бұрын
Doing this somehow makes the component to act like a client component yeah ?
@augustosamamebarrientos6246
@augustosamamebarrientos6246 10 ай бұрын
This is the best solution. Instead of switching the whole page to a client component by using "use client", you keep server rendering the page but turn the dynamic bits (where you use state or need client calculations) into their own child components, and use "use client" on the top of that component. Will work flawlessly and is the best of both worlds.
@StephenRayner
@StephenRayner 10 ай бұрын
Remember we are all still really happy and proud of the entire community pushing forward our react stack. We will get this polished just like everything else. Thank you for highlighting the issue Josh.
@lokeshstufs
@lokeshstufs 10 ай бұрын
Is there a way I can skip routes prefetching data at build time ? Basically I can use 'no-store' or 'force-dynamic', but with that I won't be able use data cache at all in run time.
@souvlaki42
@souvlaki42 10 ай бұрын
I totally agree with you. I recently faced the exact same issue. My temporary solution is to pass a Math.random() to the query parameters to force Next.js to fetch the data again. I hope they will fix it soon.
@user-cw8lz4ml5u
@user-cw8lz4ml5u 9 ай бұрын
did the same. Called it &nonsenseNextjs13. It will remind me very visibibly to stay up to date and remove that annoying workaround
@DespicariPirates
@DespicariPirates 10 ай бұрын
cant we use server components for this usecase?
@oussamasethoum2755
@oussamasethoum2755 7 ай бұрын
Is it possible to use react query to handle client side caching instead of nextjs client route caching?
@nilsandresen97
@nilsandresen97 10 ай бұрын
You can also use react query and pass the initial data from the server component to react query. Then use react query for refetching.
@martapfahl940
@martapfahl940 5 ай бұрын
Bro in the first moment I thought that was my comment HAHA
@whotfevencares
@whotfevencares 4 ай бұрын
@@martapfahl940 two brothers have met each other in wild xD
@martapfahl940
@martapfahl940 4 ай бұрын
@@whotfevencares xd
@thomasschwinn1512
@thomasschwinn1512 9 ай бұрын
what is the hint in doing the math.random in a client component?
@matthewbeardsley7004
@matthewbeardsley7004 10 ай бұрын
Hasn't bothered me in web apps, but we've stuck it in capacitor and made an android app and I think it's causing issues...can you do an advanced react hook form video, like with inputs that change based on other values, I.e maybe a discount type and value, which could be a time period a percent or a dollar amount and how you would handle that. Also dealing with null in forms, like let's say a phone number could be a string or null, rather than dealing with empty strings as null, is there a better way...all these things seem to have little quirks like using onChange doesn't make the field dirty...
@aristide_F
@aristide_F 10 ай бұрын
Hey Josh thanks a lot. I still want to ask, I believe despite this challenge you still use Nextjs for your current projects. Obviously complex applications as well. Has this really affected you in any of those projects so far?
@danshilm
@danshilm 10 ай бұрын
Personally, I think the Pages directory is still a good option to use. It's not as flexible as the app directory, but you also don't have a thousand settings to tweak and be aware of. Vercel also said that they'll support both Pages and App directory for the long term
@joshtriedcoding
@joshtriedcoding 10 ай бұрын
It has, for example in highly dynamic apps like the reddit clone. I just went with using anchor tags instead of links and felt kinda weird about that. I still use next for my projects because it's an incredible tool nevertheless, I feel much more productive than comparable frameworks
@aristide_F
@aristide_F 10 ай бұрын
@@danshilm you make a great point. Thank you. I truly love the flexibility of the app dir. it’s a genius venture.
@aristide_F
@aristide_F 10 ай бұрын
@@joshtriedcoding yeah I noticed in the refit project. Thank you lots. Also, Josh you used editorjs, I wish to ask if by any chance you ever tried facebook’s lexical.
@martapfahl940
@martapfahl940 5 ай бұрын
It is just so bad, I was changing my RTK Query API Calls, the body of it, and my Next App still send the data in the old format until I made a hard refresh with cache busting in my browser. Or do you think that was browser caching? :D
@sinasalahshour
@sinasalahshour 3 ай бұрын
so basically you want client side reactivity on that random number section. you can simply use a client component + effect hook (if necessary) to achieve that
@idanmasas
@idanmasas 10 ай бұрын
Damn. I agree Josh. It is really frustrating.
@jonny555333
@jonny555333 10 ай бұрын
It is unfortunate but you can always just fetch on the client like we used to do back in the pages folder. Im sure they will eventually have a solution for this.
@humanities1019
@humanities1019 2 ай бұрын
i tried your last example, but can't seem to replicate what happened in the last part of the video. is it because of a next update?
@lexsemenenko7044
@lexsemenenko7044 10 ай бұрын
I found a temp workaround until I understand or find real solution. On my client, I make call to an empty API POST request. And my client always refreshes. A GET won't do it. It was a temp solution until I was going to figure out the truth.
@PedroSanchez-od7cc
@PedroSanchez-od7cc 10 ай бұрын
Finally I understand this caching mess... Thank you Josh.
@user-xu1zy7pn2q
@user-xu1zy7pn2q 7 ай бұрын
hey josh how to use redux or any other state management library in nextjs13 approuter can you make a video on it properly using it
@Seedzification
@Seedzification 10 ай бұрын
If you have data that change a lot and don't want cache, wouldn't you simply do a fetch on page navigation? I'm just trying to see the problem from another angle...
@yurisich
@yurisich 10 ай бұрын
I would try wrapping the Math.random call in an IIFE and seeing how that affects the way the cache treats it.
@jamesschrader8796
@jamesschrader8796 10 ай бұрын
What about using revalidateTag? For example, I needed a way to request an updated API access token when it expired. Of course, NextJS cached the function requesting the token and so it would not rerun when I needed it to. However; in the fetch request, I added a tag (e.g. fetch('url', {next: {tags: ['api-token']}}). Then I call revalidateTag(['api-token']) upon receiving a 401 status, which invalidates the cache for that function and allows for the token to be requested again. I think this only helps when using the Fetch API, though.
@WebDevCody
@WebDevCody 10 ай бұрын
What happens when you read directly from your database and can’t use fetch?
@AGASTRONICS
@AGASTRONICS 10 ай бұрын
This happened to me I thought I was doing something wrong am the API slice on till I monitor my network. I found out that the cash stores the data in other to render it faster whenever it's called again. An the problem is with the behavior of Link element which manage cashing navigation.
@WilliamShrek
@WilliamShrek 10 ай бұрын
That's a server-side component. The Math.random runs on the server-side. Consider the server-side code is PHP and the rest is jQuery, you get the same result. Imagine you are mixing PHP and jQuery in the HTML file. Now they turn into React and the HTML becomes JSX. Tada!
@IvanKleshnin
@IvanKleshnin 7 ай бұрын
But it's cached on the client, dude.
@yousafwazir3167
@yousafwazir3167 10 ай бұрын
Have you used angular before ?
@tiborsaas
@tiborsaas 5 ай бұрын
Sometimes the simplicity of a full page reload is just good enough, like in those "old" PHP days :) It's so simple and easy to understand what's happening that it doesn't need a full fledged war map about the caching strategy.
@theangelofspace155
@theangelofspace155 10 ай бұрын
2:50 something tells me next does not do this, react query is doing it. It sounds like a lazy not flexible react query implementation 😢
@kasvith
@kasvith 10 ай бұрын
The amount of education NextJS need to put and still not getting anywhere means only one thing :) Its not intuitive anymore :)
@joshtriedcoding
@joshtriedcoding 10 ай бұрын
It's a side effect of innovation and I find it totally acceptable. Stuff like this is very frustrating, hence the video. In the grand scheme of things, it's a rather small part of nextjs that will get better with time
@kasvith
@kasvith 10 ай бұрын
@@joshtriedcoding i still think its a bad design, which they insist not to change :) caching everything is kinda insane just imagine this in a extremely complicated web app
@juanspada4852
@juanspada4852 5 ай бұрын
Hey Josh, you have an update about this?
@luccaparadeda1985
@luccaparadeda1985 10 ай бұрын
Hey josh, so do you recommend nextjs 13 still?
@zakraw
@zakraw 10 ай бұрын
Still experimentary, things definetely will be changed until 14.
@dan_____
@dan_____ 10 ай бұрын
For new or personal side projects, I'd say yes. Things will definitely evolve and hopefully change for the better. For well established or big projects I'd say stick to the pages router. It will inevitably become legacy code, but that's pretty normal in tech. New tools appear every year and the old ones get replaced by improved ones. Because of this, there's not really much of a point in trying to keep your project up to date with the latest trends. Just focus on delivering a good product with the most accessible tools at your disposal.
@zakraw
@zakraw 10 ай бұрын
@@dan_____ Agree, Next.js 13 features will get sophisticated in the next versions. At this point, you can migrate legacy Page Router as well.
@joshtriedcoding
@joshtriedcoding 10 ай бұрын
yes
@sabirameen5672
@sabirameen5672 9 ай бұрын
I too had the same problem while working on my side project. Nextjs caching is too aggressive. For invalidating the router cache, they provide router.refresh method although it only works for the current route.
@nulI_dev
@nulI_dev 10 ай бұрын
Honestly seems like Next is just getting in the way at this point. Glad things like Remix and Svelte are getting more traction since this app router mess
@jikd0
@jikd0 5 ай бұрын
This messes with mediastream too. The camera stays on even after u turn it off!
@WilliamShrek
@WilliamShrek 10 ай бұрын
The server-side component you see when you click the back button comes from the browser. That’s more of the default behavior of the browser than the act of Next.js framework.
@LehmannMr
@LehmannMr 8 ай бұрын
He presses the back button in the webpage not the browser button.
@codinginflow
@codinginflow 10 ай бұрын
2:15 But this is only the case if you use fetch, right? Things like Prisma or Axios calls are not automatically deduped I think.
@miro-hristov
@miro-hristov 10 ай бұрын
No. What he's talking about is browser cache. It doesn't even hit the server
@codinginflow
@codinginflow 10 ай бұрын
@@miro-hristov I think hes talking about both the server and client cache
@miro-hristov
@miro-hristov 10 ай бұрын
@@codinginflow True! But he gives ways to "opt out" of server cache. The real point of his video is the inability to opt out of client-sided cache.
@codinginflow
@codinginflow 10 ай бұрын
@@miro-hristov Right but my comment is not related to that part
@miro-hristov
@miro-hristov 10 ай бұрын
@@codinginflow I see. My bad then
@ajgubi19
@ajgubi19 5 ай бұрын
First video. Subscribed!
@adimardev1550
@adimardev1550 8 ай бұрын
i think vercel is very obsess about speed. next 13 completely destroyed my stack.
@leepowelldev
@leepowelldev 10 ай бұрын
The only thing I could find to workaround this was a client side cache busting link
@mertdr
@mertdr 10 ай бұрын
I think devs should be careful when using server components excessively. It's great for static content which doesn't require JS such as footer or some static sections of the page, and most importantly server-side fetch. However otherwise, "use client" is the key for everything most of the time. For the sake of argument, adding "use client" to root layout.tsx allows to render the app exactly like Next 12 (pre-rendering html and then hydrating on client). That being said, server component is a nice addition, it comes with many advantages yet there is nothing wrong with using client side components. Yours is a pretty unique case actually and it should be handled by using a client component I guess. But it doesn't change the fact that this new paradigm becomes frustrating sometimes.
@IvanKleshnin
@IvanKleshnin 7 ай бұрын
There's an obvious contradiction between "being careful with server components" and "making them the default" by React.
@humbler144
@humbler144 7 ай бұрын
whole team is facing the issues cause of this, we were almost done with the things and then see this behaviour and we are like WTF
@BuriTechVids
@BuriTechVids 3 ай бұрын
Right? I was testing NextJS before the development and started facing this issue. The problem is, that not always we can revalidate manually (especially when the data are from the remote/external servers). I would like to cache it for 5 seconds on a backend but at all on a client but... this is not doable right know. AND there is another strange behaviour: When I wait those 30 seconds which Router Cache will cache your page, then the new page/load is not cached at all. So after 30 seconds, every click on a makes an request. Which is WTF. :D
@legcyyt
@legcyyt 10 ай бұрын
bro next js routing is to slow for big project how to handle this
@ssatriyaa
@ssatriyaa 10 ай бұрын
I did use that anchor tag in the end😅
@eleah2665
@eleah2665 10 ай бұрын
Does remix have this problem?
@vacodoceo
@vacodoceo 10 ай бұрын
I think this behavior is intended. Usually, you'll be using fetch instead of Math.random() to generate data for pages, and calling revalidateTag() or revalidatePath() will ignore client-side cache. Try using fetch to a random data API instead of Math.random() in /other, and then calling revalidatePath() from / page before navigating back to /other. It will invalidate client-side cache. It may look weird calling revalidatePath() or revalidateTag() before navigating, but in a real case scenario, you should be calling revalidatePath or revalidateTag after mutating data that can affect some page
@crampssss
@crampssss 10 ай бұрын
What’s a real world use case for this?
@superchillh3o
@superchillh3o 10 ай бұрын
tbh, this is so much complexity to manage. In my current role I support various teams that need to spin up clients for their AI/ML apps or other data vis, all of these features the next team has introduces combined with RSC is too much and forcing me away from the nextjs/react world. SvelteKit seems to be striking a better balance, and I've enjoyed the DX thus far. Regardless I'm looking forward to the future improvements, but it's too much rn.
@AnindoSarker
@AnindoSarker 10 ай бұрын
omg now I understand why I can see my homepage even though I logged out. Its a serious problem
@R-A-W
@R-A-W 10 ай бұрын
We are staying with /page route. Works fine
@user-lq1vk5fg3h
@user-lq1vk5fg3h 9 ай бұрын
hi, i am new in nextjs but i think this is a rendering problem?? you have decleared this math.random() code in React server component. which sends RSC Payload which get's catched later on the client so you don't need to refech the same payload. you should use `use client` create a react client component use math.random() there and import that into your server component. now that a pure client component and will be processed and render on the cilent side.
@andrewiglinski148
@andrewiglinski148 9 ай бұрын
Dude I’ve been working on a Jupyter like app and *_MY GOD_* I can’t stand this caching issue. I have to restart the dev server every 10 refreshes. I love Next but this cache issue… especially in development is insane.
@joe_j
@joe_j 9 ай бұрын
I noticed it's running out of memory and shutting down the server, I am so frustrated
@stevekim1524
@stevekim1524 10 ай бұрын
This is exactly what is bugging me at the moment😢 any solution??
@edvinas396
@edvinas396 10 ай бұрын
Putting a clock into a client component ? Would re-render every time. You can keep page parts on “client”.
@RegalWK
@RegalWK 10 ай бұрын
I think its a problem because you are trying to make some dynamic things in server comp - if we are using them maybe we should do every dynamic calculation on route handler / server actions to achieve our goals
@gadgetboyplaysmc
@gadgetboyplaysmc 10 ай бұрын
Rich Harris is whispering: "Josh try sveltekit now"
@theangelofspace155
@theangelofspace155 10 ай бұрын
That is the main reason im not usong nextjs, I keep starting small project on vite and at work they use vite as well since the server is most of the in another language like go or managed by another team. I wish they did not force you to use so much stuff.
@magiccalabashcodes
@magiccalabashcodes 10 ай бұрын
My question will be, Next JS is meant to help pages load fast, have your pages rebuilt and served as static (if need be - ISR), so if you want your page to avoid caching on the client, then why can't you go directly with Django, or even wordpress that doesn't do the entire caching?
@abdirahmann
@abdirahmann 10 ай бұрын
because we want to write react code 😂😂
@magiccalabashcodes
@magiccalabashcodes 10 ай бұрын
@@abdirahmann And we will keep complaining to every issues, ie, fast-refresh had to perform full reload even if it has no visible effect on the app itself🤣🤣
@saralightbourne
@saralightbourne 10 ай бұрын
i really don't feel like app router is production ready… it's really amazing and so much more interesting than pages router, but there are so many issues that just aren't thought through yet. so for now, i'll stick with pages router, it's still pretty amazing as well
@tonhom260
@tonhom260 10 ай бұрын
Window.location.reload() on router.back() ?
@venicebeachsurfer
@venicebeachsurfer 10 ай бұрын
What would be your use case in which you do NOT want client side cache?
@miro-hristov
@miro-hristov 10 ай бұрын
Mostly everting i can think of: Blog: You update the title of your blog from /post/[id]/edit... you got back to /list_all_posts -> Title is not updated... Dashboards: You just paid for a subscription for a service. You go back to the dashboard just to find out you're not yet on the paid plan. Shops: You update the price of a product in your shop from the database. Everyone who's viewing your website won't see the updated price (unless they wait 30 seconds)
@venicebeachsurfer
@venicebeachsurfer 10 ай бұрын
@miro-hristov oh..hmmm... not to argue, but wouldn't your examples be updated based on the apis not being cached? I would think the page would saturate with the updated state. No?
@miro-hristov
@miro-hristov 10 ай бұрын
@@venicebeachsurfer Sure. I'm also new to Next but I think what's happening is Next is now a backend-first framework meaning it renders everything on the server (as flat html maybe). If you want to send JS to the browser you define "use client". So Next is the one pushing for this new (or old) paradigm to render on the server and not the client. You wouldn't need an api because the html in the route already provides the data. It's a good idea but it just needs opt out of client cache option or modify the hard-coded 30 seconds time period.
@codefork94
@codefork94 10 ай бұрын
Give sveltekit a go! 😊
@narzantaria1102
@narzantaria1102 8 ай бұрын
Next 13 deployment is a nightmare))
@RolandAyala
@RolandAyala 9 ай бұрын
Nextjs appears to favor complexity over simplicity, and that Vercel was compelled to write a detailed article explaining caching levers so devs get back to expected behavior is another red flag that the framework is going awry.
@nirnullz
@nirnullz 9 ай бұрын
It’s actually like angular reuseRoute default behavior. The angular dev add flag to change the default behavior. I don’t understand why nextjs dev can’t add mechanism to change the default behavior *shrug* The crud way to fix it is by adding some random query string on the url path 😮‍💨
@kisstamas6675
@kisstamas6675 3 ай бұрын
after 6 months the problem is still the same, even the documentation says the same.... guys are you facing still the same issue, or there is a solution already?
@nacho3721
@nacho3721 10 ай бұрын
it's like they focused too much on e-commerce and forgot about anything else
@AndreasStraub
@AndreasStraub 10 ай бұрын
Don’t see a real use case for it. And i think if you want to get the value updated, you can just convert your component to the client side component. I your example it’s a server side component. With that the html is rendered once on the server side. Nothing wrong with it.
@buddy.abc123
@buddy.abc123 10 ай бұрын
Okay that really sucks!
@maximilianm7324
@maximilianm7324 10 ай бұрын
They are currently working on new caching behavior in server actions to make it behave more like router.refresh()
@miro-hristov
@miro-hristov 10 ай бұрын
I think what Josh talks about is Server Components which are different from Server Actions... There's already a way to to do in in SA... revalidatePath(`/admin/shops`);
@kar2k
@kar2k 9 ай бұрын
I just switched back from nextjs to regular react with wouter. I swear nextjs 13 is too problematic.
@AdityaDarmawanYusufAli
@AdityaDarmawanYusufAli 4 ай бұрын
I doooo agree with you
@Dev-Siri
@Dev-Siri 10 ай бұрын
Next.js 13: Think Caching.
@owenwexler7214
@owenwexler7214 10 ай бұрын
That is insane. Caching should always be opt-in. Sounds like I’m going to Qwik City when pages router is deprecated.
@kumailn7662
@kumailn7662 9 ай бұрын
if you really need all time updated value why you are creating a server component, make it a client component and play with fetch api+local js
@Drailmon
@Drailmon 10 ай бұрын
What if you generate the random number server-side?
@Michaeltje01
@Michaeltje01 10 ай бұрын
Thanks for providing clarification on the inner workings, you are able to break it down neatly. You come across negative, almost condescending. Perhaps a different tone would do better justice to your hard work? Of course a framework focused on SSR is going to aggressively cache. It's the whole point of wanting to use it in the first place. If you need fine grained control over (the validity of) your data, then why would you want to use this in the first place? It's like you're trying to masquerade that a Lamborghini is not that great at plowing your land
@mohammadkermani2987
@mohammadkermani2987 9 ай бұрын
I would prefer they would let people to opt-in for caching instead of finding a way to opt-out!
@jmarbutt23
@jmarbutt23 3 ай бұрын
This is the largest issue in NextJS that they refuse to address appropriately. There is so much potential in Next but this causes the biggest issues and side effects. The other issue that you didn't discuss is how it works differently in dev vs production that also allows devs to miss this issue.
@djET0
@djET0 10 ай бұрын
I'm at the stage of deciding whether to do a new (quite large) project on next.13 (I had some contact with it). Is it on the 12++ version that I know well - with the old appRouter and without dynamic layouts. What do you think ? I would definitely write it faster in version 12++, especially since there are a lot of hits to the rest api (mainly GET), and a lot of dynamic content. However, using 13, I would probably learn more about the new next, and understand version 13 more. What do you think ?
@yacineidir7616
@yacineidir7616 10 ай бұрын
A genuine advice don't use nextjs if possible at all and if you must go with v12. Underwhelming docs, non existent best practices, too many hidden tweaks, slow dev server it's a nightmare choose wisely while you can mate
@brokula1312
@brokula1312 10 ай бұрын
Why cache client side? Don't browsers do that already for us? What's total cost vs. benefit of having that?
@irtazahussain8118
@irtazahussain8118 10 ай бұрын
Kindly give us a detailed video on the streaming server, How can we create a streaming server and pull the streams from IP camera and convert it to the hls format and then use it in the web. This is an interesting topic.
@nestromae
@nestromae 10 ай бұрын
router.refresh?
@underflowexception
@underflowexception 10 ай бұрын
Imo caching should be completely disabled unless you configure it.
@ayushjain7023
@ayushjain7023 10 ай бұрын
It’s a matter of 30s 😅
@miro-hristov
@miro-hristov 10 ай бұрын
Not exactly. If you keep clicking back and forth every 20s, the data would remain stale INDEFINETLY (for as long as you keep clicking). You need to really wait 30s without interacting with the app or website for it to update.
@ayushjain7023
@ayushjain7023 10 ай бұрын
@@miro-hristov I know it buddy, it’s just a cool off statement I made 🫣, if you want to fix it just use router.refresh() inside a useEffect in a empty client component and add it in the page 📄
@user-de8ev2bn2d
@user-de8ev2bn2d 10 ай бұрын
change it to client component
@antonismastorakis8527
@antonismastorakis8527 21 күн бұрын
Finally Next.js 15 fix this. That's good.
@ashatron656
@ashatron656 10 ай бұрын
Im all for improvements to Next.js, but this against the React rendering model isn't it? When a page changes, it renders a new page. When you go back to home page it should re render, and give a new Math.random. This is just another React footgun / caveat to make the DX even worse.
@zkaip
@zkaip 10 ай бұрын
You can make a "client component" which is including "Math.random()", and then the server component include that component.
@Akomer-
@Akomer- 10 ай бұрын
You are using this as a server side component - why would it change, if it was decided on server side ... cache is fine you have to make it client side component, so it will be new value every time -> client wont handle it as "server knows its way" :)
@zeMasterRuseman
@zeMasterRuseman 9 ай бұрын
If something has to be real time make it a client component
@idanmasas
@idanmasas 9 ай бұрын
But what if you want to preload the data on the server? This makes no sense. Back in paved route it worked just fine.
Updates Like These Make Tailwind So Fun
8:00
Josh tried coding
Рет қаралды 71 М.
The Worst Thing About Next.js 13
6:37
Josh tried coding
Рет қаралды 34 М.
Watermelon Cat?! 🙀 #cat #cute #kitten
00:56
Stocat
Рет қаралды 25 МЛН
This is why you need caching
10:03
Web Dev Cody
Рет қаралды 37 М.
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 182 М.
Cache explained with Next.js 14 - Course part 16
10:32
Codewithguillaume
Рет қаралды 9 М.
The Story of Next.js
12:13
uidotdev
Рет қаралды 544 М.
Next.js Server Actions...  5 awesome things you can do
7:51
Beyond Fireship
Рет қаралды 252 М.
Why I Don't Use NextJS For My Side Project Anymore
6:51
Josh tried coding
Рет қаралды 60 М.
This reminded myself of why I dislike Next.js
20:10
Web Dev Cody
Рет қаралды 51 М.
What Next.js doesn't tell you about caching...
13:32
Marius Espejo
Рет қаралды 10 М.
Fetching Data Doesn't Get Better Than This
6:58
Josh tried coding
Рет қаралды 75 М.
The Truth About Next.js 14
17:12
Theo - t3․gg
Рет қаралды 74 М.
Mem VPN - в Apple Store
0:30
AndroHack
Рет қаралды 94 М.
Best Beast Sounds Handsfree For Multi Phone
0:42
MUN HD
Рет қаралды 341 М.