Version skew feature

[rmarscher]

When new versions of client code are deployed, it is helpful if the framework can help load the new version into open browser windows.

I see some people call this issue version skew - https://www.industrialempathy.com/posts/version-skew/. See https://nextjs.org/docs/app/building-your-application/deploying#version-skew and https://svelte.dev/docs/kit/configuration#version

[dai-shi]

Yeah, that would be great. I wonder where I would implement it and how. Also, maybe we should learn more about implementation approaches from others.
In the meantime, I guess there should be a user-land solution. I could try something after v0.22 if anybody else has done.

[rmarscher]

If we can avoid polling, that would be great. Would we automatically append a client version param in the query string for RSC requests and then the server would return an error if the version doesn't match - which then the client could handle? There are probably certain applications where the developer would want to control what happens - automatic reload or prompt with a manual reload.

[dai-shi]

Yeah, like a http header.

[jasikpark]

For our Vite SPA React app we host /v as a static file containing the github run ID, and convert the links to fully reload the document on click instead of being SPA links, ensuring their next navigation will reload the page. Seems to work well enough. Polled with react query on a 10m cadence.

[dai-shi]

Sounds interesting. While I still don't prefer polling, there might be something I could learn especially around vite config. Do you have anything you can share?

[jasikpark]

We actually just have a github actions step that sets it up:

    # Prepare static files for building
      - name: Inject unique build id into version file
        run: echo ${{ github.run_id }} > public/v

and basically if the app ever sees the value of v change while it has been running, that means that the site was redeployed while it was running

[rmarscher]

Here is some code that I found referenced while browsing issues in other projects. It attempts to recover from an import error in the browser:
https://gist.github.com/mberneti/28769391cf27f7580a55dedab342c63a

• Avoid version mismatch between client and server remix-run/remix#3016
• Mobile iOS Safari Errors - 500: Importing a module script failed. sveltejs/kit#5208

[rmarscher]

I wonder how this problem is different when using React.lazy vs pre-loading links and navigating to other pages.

[rmarscher]

I just found this - https://vite.dev/guide/build#load-error-handling

window.addEventListener('vite:preloadError', (event) => {
  window.location.reload() // for example, refresh the page
})

When a new deployment occurs, the hosting service may delete the assets from previous deployments. As a result, a user who visited your site before the new deployment might encounter an import error. This error happens because the assets running on that user's device are outdated and it tries to import the corresponding old chunk, which is deleted. This event is useful for addressing this situation.

[rmarscher]

I'm testing a vite plugin to generate a build ID. I'd rather store it somewhere that can be imported by the server. platformData? Or something else? I also don't know if there's a better way to generate the build ID but it seems to be effective with the base template. https://github.com/rmarscher/waku-version-skew-example/blob/main/waku.config.ts#L44

Once we have a build ID, we could pass it down to React somehow and set it in a request header from the Waku client and then compare it on the server. If it doesn't match, the server can return some type of error code that the client can use to reload the modules - or reload the page.

[rmarscher]

In the meantime, I can create a client solution that polls /assets/client-build-id.txt but not as ideal.

[dai-shi]

How about setting the build ID in the http header using Waku middleware and compare it on the client? (Ah, I need to expose enhanceFetch from Router.)

Ideally, I would like a solution that works for static sites, so the http header isn't an option in that case.

[rmarscher]

I think I was able to make the build ID available to static components using a Vite virtual module. rmarscher/waku-version-skew-example@e6c5007

Demo here https://waku-version-skew.martiandev.workers.dev/

[rmarscher]

I learned that Cloudflare has a header Cloudflare-Workers-Version-Key

https://developers.cloudflare.com/workers/configuration/versions-and-deployments/gradual-deployments/#version-affinity

I also found documentation for Vercel's x-deployment-id header: https://vercel.com/docs/skew-protection#supported-frameworks

enhanceFetch sounds good.

[dai-shi]

#1307