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.

[dai-shi]

It depends on how the user-land solution is user friendly. I think for the first challenge, it can be a proof of concept.

The server side logic can be in custom entries.tsx, but for the client side, it depends. If we treat it as an "error", an error boundary can catch it and force reload. If it's 200 response.

We need some ways to trap the response.

waku/packages/waku/src/minimal/client.ts

Line 194 in 1d19f7f

unstable_enhanceCreateData?: EnhanceCreateData;

does it for the minimal client, but we don't have a capability in waku/router/client. 🤔

The ID generation could be skipped using an environment variable (can be done with a user-land vite plugin too.)

Do we want a periodical poll? I thought it could be only the check with RSC request.

[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?

[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.