Reload after new deployment

[delgermurun]

Here is a quote from deployment wiki

We generate a unique BUILD_ID for each time when you run next build. We use that id to detect new versions from the client side. If the client side app detects a new BUILD_ID it'll reload the page. With that, your users will use the latest version of your app always.

Client side doesn't reload automatically after new deployment. Should I do any extra config or something to enable it?

Thank you.

[timneutkens]

The way it works is that the previous build bundles shouldn't be served anymore when there's a new version, meaning that the user will automatically get their page refreshed and they'll be on the new version.

[tima101]

@timneutkens My question might be stupid. Is there a way to update pages that are prefetched in the background? Once a new app version is deployed, a user clicks and loads a server-side rendered page and a new version is loaded to the user's browser. But this is not true for prefetched pages. If a user browses prefetched page, this user still browses older version of the app.

Thanks.

[timneutkens]

If the page is prefetched we don't do another call for the script bundle. If you want to handle this case you'll have to implement your own update loop using an interval to check if the buildId changed or something.

[JuanOrtizOvied]

@tima101 "If a user browser prefetch page, this user still browser older version of the app."
you resolved those problem ?

[tima101]

@UsuJuan When we deploy new version of the app and when it does not match version on users' browsers - we use window.location.reload to reload tabs so all users with currently open tabs have most recent version of the app.

[JuanOrtizOvied]

@tima101 Sorry for my next question, how to verify the change of BUILD_ID, can you show me an example, I'm starting in the programming. how know new version of the app and when it does not match version on users' browsers . Thanks in advance.

[OzySky]

I have been struggling with this for a few days already.
Next custom production server does not pick up the new build until I completely restart the server.

[svobik7]

@UsuJuan When we deploy new version of the app and when it does not match version on users' browsers - we use window.location.reload to reload tabs so all users with currently open tabs have most recent version of the app.

@tima101 do you use your custom version number or next.js BUILD_ID? I am trying to figure out how can I get latest build id pro zeit server.

[twdrake-ap]

@timneutkens I've been seeing an issue with our production next js app where after a new deployment, we usually track a Unexpected token '<' error being thrown. This seems to be caused by a call to router.push which triggers a request for a new page. All the app's pages are SSR.

Could the server be responding with an unexpected html error file? Any idea what this could be? I'm wondering if it is related to the client failing to reload and run the new deployed version. Could this be Next or is it more likely related to our deployment process having a small window where both our load balanced servers are offline.

[anguskeatinge]

Just in case anyone runs into this and wants to solve it without having to think too hard or write much code themselves.

Here is how I did it, works like a charm:

// this goes in /pages/_app.tsx
const [buildId] = useBuildId(); // useSWR under the hood
const prevBuildId = usePrevious(buildId);
React.useEffect(() => {
    if (prevBuildId && buildId && prevBuildId !== buildId) {
        Router.reload();
    }
}, [buildId, prevBuildId]);

And I have an endpoint /api/build-id

const buildId = (req, res) => {
    res.status(200).json({ buildId: process.env.VERCEL_GIT_COMMIT_SHA });
};
export default buildId;

They lose all local state as it's a hard refresh, but for my use case that's not a big deal.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.