New Features Require Browser Refresh After Deployment
Unanswered
inam posted this in #help-forum
inamOP
I'm working on a Next.js project using version 13.3 (I know it's not ideal 😑 ). Recently, I've encountered an issue where new features don't appear immediately after deployment.
For example, I added a modal that should appear when a button is clicked. After deploying this update, I visited the production URL (which was already open in my browser) to check the new feature. However, the modal didn't show up. I navigated through a few pages and came back, but the feature still didn't work.
The only way I could see the new feature was by performing a browser refresh.
Does anyone know why this is happening and how to fix it?
Thanks in advance!!
For example, I added a modal that should appear when a button is clicked. After deploying this update, I visited the production URL (which was already open in my browser) to check the new feature. However, the modal didn't show up. I navigated through a few pages and came back, but the feature still didn't work.
The only way I could see the new feature was by performing a browser refresh.
Does anyone know why this is happening and how to fix it?
Thanks in advance!!
11 Replies
if you are using Vercel, they will prevent version skewing as much as possible but i think you need NextJS 13.4 or higher
Also make sure to take a look at this section:
https://vercel.com/docs/deployments/skew-protection#skew-protection-with-next.js
https://vercel.com/docs/deployments/skew-protection#skew-protection-with-next.js
(it defines which versions enable skew protection config by default and which require manual intervention)
inamOP
I'm using AWS
@Clown
You'll have to find a solution to version skew yourself then or check to see if its available on AWS
skew protection isn't to see new features without a browser refresh, it is to continue using the old deployment with old features without network calls breaking
the problem in the original question is fundamentally unfixable for all websites, unless you are writing a very simplistic html+css+js site. different deployments have different bundle files and they are likely incompatible with each other. you can't use files from deployment X, put it to deployment Y and expect it to automatically work out of the box.
inamOP
If I'm on the same page where a change has been made, I understand that a refresh might be needed for the new feature to work. However, I expect the new feature to work when navigating to the particular page from another page. Could this be an issue with Next.js caching?
@joulev
@joulev
@inam If I'm on the same page where a change has been made, I understand that a refresh might be needed for the new feature to work. However, I expect the new feature to work when navigating to the particular page from another page. Could this be an issue with Next.js caching?
<@484037068239142956>
not related to nextjs caching. it is just that bundle files from a deployment are not guaranteed to work with another deployment, nothing you can do to bypass this.
a full page reload is required and nextjs already handles that automatically for you.
a full page reload is required and nextjs already handles that automatically for you.