Next.js Discord

Discord Forum

How to clear SSR cache?

Unanswered
Himalayan posted this in #help-forum
Open in Discord
HimalayanOP
I'm new to the App Router, so please be gentle!

I have a client component (use client) that I added a MUI TextField component to. I have now removed this component but I am still seeing it in the version of the component delivered from the server, it then disappears when the client renders the component. (When I reload the app, the TextField is initially displayed, then disappears). This is being accompanied by:
Hydration failed because the initial UI does not match what was rendered on the server

Do I need to clear a cache at the server to get it to stop rendering the TextField? Thank you!

35 Replies

DirtyCajunRice | AppDir
one of the biggest reasons mui is dogshit honestly
clear all cache on your project
in settings
HimalayanOP
Do you mean the browser cache?
I'm not aware of a "Settings" anywhere else
DirtyCajunRice | AppDir
you didnt state WHERE it is happening, so the assumption is production vercel
if its just development, delete the .next folder.
HimalayanOP
Oh, sorry! Yes, it's just local development. OK, I'll try deleting the .next folder, thanks @DirtyCajunRice | AppDir So is this a problem with MUI? What is MUI doing that is causing it?
One rm -rf .next later and it's still happening 😮
DirtyCajunRice | AppDir
yep
only other thing is f12 and deleting all cache and storage
i dont recall where mui caches their shit js anymore
if you arent 100 pages deep already id suggest any of the 50 better component library alternatives
HimalayanOP
Mmm, I think you could be right. Although I'm bound to MUI for this project, but I'm not too far in to switch to the pages router. I just completed a 6 month project using MUI and the pages router with no issues, so maybe that's the best way forward...
downgrade the entire project to appeal to a single opinionated library when there are so many alternatives.
Ray
https://mui.com/material-ui/guides/nextjs/#app-router
do you have it setup properly?
@Ray https://mui.com/material-ui/guides/nextjs/#app-router do you have it setup properly?
DirtyCajunRice | AppDir
that page is written incorrectly tho because it wants someone to install mui
:kek:
@DirtyCajunRice | AppDir downgrade the entire project to appeal to a single opinionated library when there are so many alternatives.
HimalayanOP
I know, it's not nice, but I really have no choice. We've a large component library based on MUI, so I can't ditch it 😦
@Ray https://mui.com/material-ui/guides/nextjs/#app-router do you have it setup properly?
HimalayanOP
Just checking now... 🙂
@Himalayan I know, it's not nice, but I really have no choice. We've a large component library based on MUI, so I can't ditch it 😦
DirtyCajunRice | AppDir
that will be a crutch / excuse forever then. this is another critical design problem with companies choosing a framework SO opinionated that they are infinitely vendor locked.
I just noticed something very weird though, it's only an issue when I have DevTools open. If I close it I don't see the removed TextField 🤷‍♂️
DirtyCajunRice | AppDir
gotta buy a new pc then
jkjk
just check your settings in network tab may be something in there
This is a new one on me, any idea what this purple dot means in Chrome DevTools?!
Oooh, it means it's been overridden, interesting...
Ah, OK, so Chrome has saved a response override for that page. Deleting it has fixed the problem. WTF! So now I need to figure out why Chrome created an override...
HimalayanOP
I think this may have all been my issue. I had "Enable local overrides" enabled in DevTools (from some experiments recently) which, for some reason, was causing Chrome to create a local override for the page (though I've no idea why), deleting the local override and disabling that option seems to have fixed it. Very odd indeed.
Thanks for your help @DirtyCajunRice | AppDir much appreciated!