⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

Deployment synchronization

When you deploy a new version, then any user currently browsing your (now outdated) frontend will automatically transition to the new frontend as soon as the user navigates to a new page.

This works for both Server Routing and Client Routing.

Everything is handled automatically and there is nothing for you to do.

What is the deployment synchronization problem?

The problem is this: when you deploy a new frontend, what should happen to your users that are currently browsing your frontend?

If you do nothing, and if your app uses Client Routing, then your users may end up staying a very long time on your outdated frontend with outdated client-side JavaScript. This may lead to many problems such as out-of-sync data requests and mutations.

Reloading the page of your users as soon as a new frontend deployment is detected is a no-go: it disrupts your user's activity on your website and your user may lose ephemeral client-side state such as the text he entered in a form or in a comment textarea.

What many websites do is to show a little popup to users saying "a new version is available, click here to reload". But this solution is far from ideal.

What vite-plugin-ssr does instead is that it falls back to Server Routing: the next time the user navigates to a new page, the page does a full reload so that the user loads the new frontend.

How does vite-plugin-ssr's solution work?

Vite-plugin-ssr temporarily falls back to Server Routing whenever retrieving a static asset returns a 404: the URL of all static assets contain a unique hash and, consequently, when the user navigates to a new page then the old frontend requests static asset URLs that don't exist anymore.

With Server Routing, when the user navigates to a new page, the entire client-side is reloaded (i.e. the new frontend is loaded). After the reload, Client Routing is resumed.

Note that, since the client-side is fully reloaded, all client state is lost if not persisted (to window.localStorage, for instance).

So far, this strategy has shown to work out for all users, but if it doesn't work out for you then open a new GitHub issue.