Announcing the Version Updater component

The version updater component is a new feature that allow your app to check for updates and prompt the user to install them.

·3 min read
Cover Image for Announcing the Version Updater component

One of the issues arising from hybrid applications is that keeping the client and server in sync can be a challenge.

Scenario: Your app has a few users who are currently using the application - and at the same time you deploy your new version - it's possible to hit issues where the client and server are out of sync.

This can lead to unexpected behavior, crashes, even data loss and vague 404s since the referenced script hashes are no longer valid (as they were wiped out).

Hosting services like Vercel have a feature called "Skew Protection" that takes care of this specific issue, but outside of it you're largely on your own. This is where the new version updater component comes in.

The version updater component is a new feature that allow your app to check for updates and prompt the user to install them. It's a simple component that you can drop into your app and it will take care of the rest. It's designed to be as unobtrusive as possible, only showing a prompt when an update is available.

NB: this feature is specific to the Next.js and Remix Turbo versions.

How does the version updater work?

  1. App version: At build time, we store the current version of your app in a route at /version containing the git commit hash.
  2. Polling for updates: When the app loads, it fetches the current version from the server and compares it to the version stored in the route. We refetch in the background every 2 minutes - but you can configure this.
  3. Prompt user to reload: If a new version is available, the component will show a prompt to the user asking them to install the update. If they accept, the app will reload and the new version will be installed.

Once the user clicks on "Reload and Update", the app will reload and the new version will be installed. At this point, all the files will be updated and the app will be in sync with the server. The customer will be able to continue using the app without any issues.

How to use the version updater

The version updated is off by default - and this is because Vercel already protects you from this issue. However, if you're not using Vercel or you want to have more control over the update process, you can enable it by flipping the environment variable NEXT_PUBLIC_ENABLE_VERSION_UPDATER to true.

NEXT_PUBLIC_ENABLE_VERSION_UPDATER=true

To configure the polling interval, you can set the environment variable NEXT_PUBLIC_VERSION_UPDATER_REFETCH_INTERVAL_SECONDS to the number of seconds you want to wait between each poll. The default is 120 seconds (2 minutes).

NEXT_PUBLIC_VERSION_UPDATER_REFETCH_INTERVAL_SECONDS=480

Above, we set it to 480 seconds (8 minutes), but you can set it to whatever you feel is appropriate for your app.

Conclusion

I strive to make Makerkit the best possible kit for building a SaaS application - and this means taking care of the small details that can make a big difference. The version updater is one of those features that can save you a lot of headaches down the line.

Let me know what you think of this feature and if you have any suggestions for improvements. I'm always looking for ways to make Makerkit better and your feedback is invaluable.

Ciao!


Read more about Changelog

Cover Image for Introducing the Testimonial Plugin for Makerkit

Introducing the Testimonial Plugin for Makerkit

·4 min read
Introducing a new plugin to add testimonials to your app with ease
Cover Image for Creating a Delightful Onboarding Experience with Multi-Step Forms

Creating a Delightful Onboarding Experience with Multi-Step Forms

·10 min read
In this post, we'll show you how to create a delightful onboarding experience using the Multi-Step Form Component for Makerkit.
Cover Image for Introducing the Multi-Step Form Component for Makerkit

Introducing the Multi-Step Form Component for Makerkit

·3 min read
We're excited to announce the release of the Multi-Step Form Component for Makerkit. This component allows you to create multi-step forms with ease.
Cover Image for Announcing the Feedback plugin

Announcing the Feedback plugin

·3 min read
The feedback plugin is a new feature that allows your users to give feedback on your app.
Cover Image for Announcing the Waitlist plugin

Announcing the Waitlist plugin

·2 min read
The waitlist plugin is a new feature that allows your users to sign up for early access to your app.
Cover Image for Introducing Makerkit Turbo: faster, simpler and more powerful SaaS Boilerplate

Introducing Makerkit Turbo: faster, simpler and more powerful SaaS Boilerplate

·4 min read
I am excited to announce Makerkit Turbo - the next generation of our SaaS boilerplate. It's a tremendous upgrade over the previous version, with a focus on speed, simplicity, and power.