I'm happy content creators are starting to catch on to these issues and making them known. This has been an open issue in github for a while now.

The most painful point is that it sometimes has different behaviours on production mode and development mode

Impressive, very nice. Let's see Paul Allen's workaround.

That discord poll looks very familiar 😂 btw, you can just wait 30 seconds before you navigate to a new page and your client router will clear the cache. I was honestly going to make a video about all of this, but I decided I’ve publicly hated on next.js enough for a bit and for my sanity I’m just accepting this framework is still alpha.

Client cache is not the same as server cache. Everything you've shown on the video is related to server cache, which actually doesn't run at all in a development environment. Server cache prevents a re-render of server components on the server, storing the resulting plain-html for that specific page, ready to be served, avoiding db calls, business logic, etc. You decide when that render should happen using the options you've shown on the video. Then, when a client request that page, it's cached on the client as well to avoid multiple request on navigation, triggering a request on first page render only and storing the result on memory. On subsequential navigations, it will be readed from there. That's why server configuration seems to do nothing: it isn't being called at all. Sadly, there isn't an available API to config client cache behaviour yet. For now, you can use router.refresh() to force a client refresh, and useTransition to show some indicators. I hope they add new features related to this topic as soon as possible!

Seems that engineers of nextjs do not know the quote "There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton " Caching should always be an opt-in not opt-out. And something with pre-optimalisation is root of all evil

Josh, all your Next.js 13 related videos were helpful to me. Will you please create a playlist on your channel for Next.js 13?

I love your videos Johs 😍, but here's my take: If it's a simple page you can create a client component and use React.useEffect() to always revalidate the data. And if you happen to have some data that must be only on the server you can pass it as props or children of that client component. Since we're listing problems let me tell you one of mine 😂: in NextJs 13 if you happen to have set serverActions to true in next.config.js, if you're using dynamic meta and title tags in your head components this behavior also occurs, thus it'll revalidate when you move to a new page(using the Link component) on the first request, but in when you move to another new page the tags would still be the same, it can't revalidate the tags from request 2 and upwards. Nice video 🎉

Hey Josh, I love your content! I have a comment about a possible good way to think about this: React Server Components only run once on the first request. That's why whenever you refresh or use a link component (which actually makes a request to the server, then caches the page -- same as NextJS 12) we get fresh data, then cached data on subsequent client-side requests. I actually think this makes sense because Math.random in your example exists on the server side, not the client-side. So yes, the page isn't cached, but you only ever hit it once, on the first request. I'm using NextJS 13 for a freelance project and the way I handle this behavior is by treating the server as a way to generate SEO-friendly "initial" content. My server-state management tool of choice is tanstack-query (formerly react-query). Tanstack query allows you to pre-populate your data cache with this initial data and bound it to a route (see: tanstack.com/query/v4/docs/react/guides/ssr#using-the-app-directory-in-nextjs-13). Then on subsequent *client*-side requests, tan-stack takes over as needed, based on your revalidation rules. As a bonus, you can set tan-stack query up so that it doesn't fetch on mount, because theoretically, the server gave good data. So, I don't necessarily think this is a problem. We just need to remember that only the first request is a server-side request. All other requests are client-side requests. NextJS Links break this rule because if the client-side router hasn't seen a given route before, it pre-fetches it on the server, then caches the result for subsequent requests. Simply focusing the link is enough to trigger this in the background, which is a nice touch, actually. In the case of your example, I would generate your random number on the server and pass it as props to a client-side view component. Initialize a random number state using the server prop, and handle updates to the random number on the client (or make requests to the server when required). As a bonus, a completely different way to solve this problem would be to use server-actions that run when page component un-mounts. I think this could work because a getRandomNumber() action wouldn't need to hold state, so we could safely share it between resources. Something like that, but I haven't tried it. Do you agree with this pattern? I feel that server-side data should be treated as "initial" data as you demonstrated. It's a little frustrating because you have to also handle client-side updates to said data, but I think it's a fair price to pay for SSR. Again, awesome video! NextJS 13 is an interesting time to discover new patterns and way of thinking about how we write our programs. Best wishes with your YT channel! - Ozzy.

one way to solve is to use prefetch={false} in link. The approach of prefetch as false doesn’t solve if one uses browsers back button, I fixed this using router.refresh() inside useeffect in a client component and add it in server component 😉

Im usually doesn’t comment, but you are a life saver. Im on the path to choose next.js and server components for our brand new startup tech stack. This video is a clear example why we shouldn’t rush to choose server components for real-world production.

If you add prefetch={false} onto your tag AND you are running your entire app route off a dynamic segment (think next-intl locale), it seems to not cache using your example of reading a file, changing the file, then navigating back. This will mean that your root app is no longer '/' but '/en/'. So in your example the pages would navigate between Other page and Home page

I learned about the next.js caching problem when I made your real-time chat app where you create a helper function to avoid the default cache mechanism provided by Next. learning new things from you every day

Great to know that finally someone brought awareness to the issue. Keep up the good work Josh!

Doesn't this mean that there's client side caching? When you click on the links in the page after revalidating with the `/revalidate?path=other`, does refreshing the page work? Wouldn't the solution be from the perspective of client components, rather than only service side components?

Does it happen when you use fetch or only when something else?

Afaik the client refreshes server components after 30 seconds if they are not navigated to within that time. I tought disabling prefetching inside the Link components gets the desired behaviour, otherwise hard navigation with a 'a' tag.

Just some additional information, revalidatePath only adds that route to a queue to revalidate the next time that page is requested from the server. It does not do it on-demand. RevalidateTag is only one that actually revalidates on-demand and then sends a request to the server.

This video is a godsend for people new to Next.js 13. This kind of behaviour is why I'm very paranoid and I often build and test the built app instead of using dev mode. Of course this has bad DX but what can you do...

we started our new project in company using nextjs because from all perspectives it looked perfect for our project and worked for 3 weeks on it, and in that time we found so much issues and we had to google it, ask people on forums and everywhere to find solution and create a lot of workaround in order to make it work, nextjs was limited so much and doesnt give you freedom because of that, and some stuff looked like force you to use some thirdparty things that you dont want but you need, on other side nextjs is very easy and have so much unique things that its defintly worth it to learn and create some project with it, but for some complex projects there is a still long way to mature so you can use it, at the end we abandoned nextjs development and return to old good php which handled everything with easy.

It has been fixed guys you can add export const dynamic = "force-dynamic" to make it dynamc

FINALLY - some1 addresses this MAJOR BUG! I started to hate cache with v13 Nextjs… Websites with higly dynamic pages as estore suffers ALOT!

Hi Josh, Any solution regarding this problem ? I have the same issue, ...painfull

I had a very similar issue and went through the exact same thought process as you. The only thing that fixed it was setting prefetch={false} on the Link component. Not sure if it works for your use-case, but thought I'd share. As to why it works: 🤷

I had this problem with nextjs in production. The work around for me was simple, add "console.log(request.url)" in my non dynamic GET route handlers so handlers that look like " export async function GET(request: NextRequest) {} " and not "export async function GET(request: NextRequest, context: { params }) {}". I found a post that referenced this work around and havent been able to find it again so I have no idea why it works. Using Next 13.4.3

So, switching to app from pages currently is not worth it?

What I also hate from nearly all javascript frameworks is that they change the architecture massively too quickly while also not updating entirely their documentations. They just documents the core main areas and the rest you have to find it out by yourself. So you need to keep rewriting your code all the time while also needing to keep shooting in the dark because there is no documentations.

Make only the part that has the value a client component and rest server. Woulden't that fix it?

Pls help, I am having a problem that in app router. Let's say i have a main page and a contact page, if i click on the link to the contact page in the main page and go back to main page by clicking on the link to the main page in there, it doesn't load. Why is this happening??:(

I'm facing this caching problem with images which are stored inside /public. I have to rename the files to get updated images:(

im just confused why they would announce the app directory as "production ready" or "stable" or whatever when it has so many issues still. another one I've been trying to battle is, you cannot access the full request object like you could with getServerSideProps. so you have to do weird hacky workarounds with middleware, which is just frustrating. Im gonna downgrade to next 12 for another year or so, until they iron out all the kinks.

Another painful point I noticed was if we have created a API route inside the nextjs app and if we call to it inside a server component using fetch, we have to provide the absolute URL for that. Does this happen to anyone else?

I think web dev cody also address this issue in his youtube short right josh?

did you try to build and start ? is this just dev mode behavior?

Can you just wrap it in a client component with a context provider? New context and it gets rerendered? Or am I defeating the purpose or something

hard navigation option for Link is something that should be introduced regardless if it is the fix for this particular issue or not

I also had problems with caching. It is pretty annoying, especially if you are developing CRM. In my case, my data from prisma request was cached, like in your video. I used router.push() with option "forceOptimisticNavigation: true". It forces all requests in my RSC.

Image me. Two days ago i first started using Next (switching from nuxt / vue) and i immediately ran into this problem. I spend 2 hours on this until i finally found the github issue and realized this is not a me problem. Hopefully this will be fixed soon. For now i keep working with next. Btw. the frontend link cache is not infinite it is 30 seconds - after that you get a real load. it is mentioned in the github issue

@joshtriedcoding you should do a sveltekit v1 review 😮 would love to hear your thoughts and see some svelte content. Either way I still I rang that 🔔 icon and always look forward to your videos.

Can you make a video on how to setup million js with next js 13 app directory

Yes, I run into this problem, end up trying to look at my database, my fetching, all this other stuff. I was thinking I got a bug somewhere else no in Nextjs. I have to turn my page into a client component to fix it. Its a big of a let know as I was excting about using server components in some of my pages.

Use next/navigation instead of next/link it will easily fix or create caching configuration for page

Is anyone facing issues with loading.js not getting served? I click the Link tag and takes pretty long to redirect the page.

The issue you ran into was you had a soft navigation back to your main page because Next, and you need to clear the React cache by using router.refresh() before you can get the change to show.

Not to mention the insanely slow development mode. Next team are very ambitious, and I believe when they will stabilize Turbopack and the app router more, it will become much better experience.

This is why I’ve stuck to client components and react query for data fetching in highly dynamic apps. Server components just don’t seem To support highly dynamic apps yet.

some content outside of next.js will be great well done

Hey great video as usual, quick question what is the technologies you need to study to actually launch a website/web app. Everyone always make videos about this new technology and another new technology. But what are the technologies need to start to launch an application to public. And what technologies can be learned after to enhance your knowledge.

Can you please make a NextJS project tutorial where you integrate Express.JS in the backend 🤞🏽

Don't you think useEffect will help?

What about compulsory Image width and height nonsense? It's great pain with Tailwind.

Next has had annoying caching behavior for awhile now. I can't count how many times I've had to delete the cache folder in the .next folder because it keeps using cached versions of images in my dev environment

Another problem is static pages and serving Nextjs project on custom server. its been forced to use it only on vercel . we cant use some features such as dynamic routes for static pages . which we want to publish or server . we can deploy to server that support Nodejs .. so if its can be solved please make a video in which a Nextjs Application which dont use api route is deployed to a custom server as hostinger or aws. or heroku etc .

I found it very hard to understand why I was using next js 13 at all. It's was at the time quite literally a budget dotnet mvc with little to none documentation.

I personally think the pages router is perfect. They just need to add component level data fetching. They should also allow both getStaticProps and getServerSideProps on the same route. This should address majority of the everyday needs.

thank you so much, i had this problem in my app when i tried App router recently, and i was just going crazy about it... i am still mad after so many days because this cached things for no reason and i had no idea (still have no idea) how to prevent this.. extremely sad for this to happen to nextjs without proper explanation

isnt it called ISR (which you can disable)?

Even though the app directory is pretty innovating and improved, it's not production ready in my opinion. It is going to take a while to become a more viable choice than ssr or isr.

What about router.refresh()?

It seems to me that you are making wrong assumptions, since the page is requested from the server, it is cached locally, and with F5, it is fetched again, once loaded, the already loaded page is used if you need dynamic data you must place a component, with "use client" and this in turn will be dynamic, I believe that this cache has a gigantic power, but as we are talking about javascript on the server, it still finds some misconceptions, I could be wrong, but I am developing a new app in next 13 and when I came across this it became clear that pages generated on the server are static and if I need something dynamic I need components with the "use client"

I use Remix so I'm fine, however each framework has its tradeoffs. For example in remix if you send a post request using axios the action function request does receive the data, but it can't redirect after, that is why we use useFetcher instead.

The most frightening part is the issue is 9months old with about 200 comment on it and it's still not resolved

Append the timestamp as a query parameter. This effectively creates a unique URL each time the code is executed, bypassing any caching mechanisms.

When You create nextjs build its .next directory size go above 3gb 😢😢😢😢 How someone can deploy this using rsync

can u mention the issue in github

Best content - thank you I learned a lot from you

this is not only Josh if you add page transition using provider and framer motion you got infinity network call.

I haven't tried this yet, but... What about useState() hook with the initial state being Math.Random or whatever data you want to be dynamic?

you should join next js dev them... the would be happy. to have such talent as you

Great video 👍

That's why I love React-Query so badly!

Yes, I asked this question at stackoverflow too. Still not having any good idea.

It looks like a client cache issue. Try adding the "prefetch={false}" property to the "Link" component.

For me the worst thing about next js 13 also is persisting values in zustand or redux. I can't find the best solution how to do it.

With Next12, you could make a lot of architectural errors and the software would carry you, but this disabled us from using more modern React solutions like Fetch API / deduplication. Next13 functions more like a fullstack application with a clear distinction between server and client components. You're attempting to use a client-side feature in a server-side component. It's more of a problem with how you think about components, not an issue with Next itself. The issue with Next is they don't address these changes well in the documentation, and it's harder for people who've never done this stuff before.

Looks like they’re relearning all the old lessons that laravel/Django went through ages ago. Time to go back to the drawing board

Half build an app and im already considering learning svelte or nuxt

Hopefully, they fix this soon. Caching is great, but clearly, you need to be able to update the cache.

This actually is a old PHP issue that got fixed in PHP they were not kidding when they were saying that Next.js turning in PHP 😂

Josh keep in mind this is not a server issue its actually a client issue. The server behaves correctly. What happens here is what happens during pages dir for ssr as well. What you are experiencing is a soft navigation. I’ve been saying for months since app dir first previewed that we need enforceable client control over soft navigation. Next team has no comment.

Thanks for pointing that out, I thought I am dumb and didn’t understand next js 13. caching in dev and in prod behaves differently

NextJS 13 It´s hard for beginners. I'm keeping an eye Qwick

Its slow... Oh lets cache everything

In my opinion. Some user "cached page" and some user want "realtime page" asking. When cached page user asking 'Why this page always reloaded ??" When realtime user asking "Why this page not reloaded ??" I encountered this problem in ruby on rails when using Turbolink with datatable

Time to move to svelte

Just don't use server components. Unless you create simple, boring, static websites. In all of my projects where I use Next, I inevitably start adding 'use client' to just about every single component. Because they all have some level of interactivity inside them. Next is great because I can easily have my front-end and back-end code in a single repository. But the fantasy of server components quickly goes out the window, once you start running into all the issues and complexity just to avoid showing a "spinner" (for the same amount of time it would take to load the server component itself). TLDR: server components sound great until you start using them in a real project

Nextjs app directory is super frustrating. Things would work 5 times in a row, then not work. In development things would work fine but then in build mode everything breaks. I'm just going to learn Sveltekit

And that's after Theo told everyone to use Nextjs, because it's stable

they suggest to use router.refresh() if u want an updated data when navigating

Hi can you check it with page folder may be it solves that!!

Yeah 😕 That's bug 42991 ... It's been around for months!!

Why vercel doesn't just fix it

This is fine :)

i told you guys!!! I saw this coming a long time ago...

This app router is fire, in all means. I really like how it works, but seriously there is so much problems. Actually in the doc they say to use server actions to handle forms, but it’s in alpha mode, and more over crash if you use generateStaticParams, so if you want SSG you’re basically fucked lol

You are the real dev.

Svelte is the best next for me so so bad I was using next since V10 I switched to svelte ❤

I found myself a back-end engineer.

I assume you are Running dev server?

I’m of the opinion that SSR and all of its variants should have been truly everything is rendered on the server and not just parsed on the server and reconciled and committed on the client. If that makes sense. It’s turned into so many hacks. It should be all or nothing. Everything is rendered on the server literally and the client should merely reflect the state on the server. I get this raises a lot of debates. But that’s how I feel.