Update Detection

Introduction

When we deploy a new update, our Nuxt app needs a way to be notified. Out of the box, Nuxt applies a polling strategy, checking every hour if the build is out of date which can lead to delayed updates.

Alternative strategies like Server-Sent Events (SSE) and WebSockets provide real-time notifications, but have different platform compatibilities and performance trade-offs.

The best strategy is automatically selected based on your deployment platform, but you can override it in your configuration using checkForUpdateStrategy.

Note: For ws strategy, you must enable nuxt.options.nitro.experimental.websocket.

Polling

The default strategy that works on all platforms. Uses Nuxt's built-in experimental.checkOutdatedBuildInterval to periodically fetch builds/latest.json to determine if a new deployment has occurred.

It's recommended to update checkOutdatedBuildInterval to a quicker polling interval as 1 hour may be too slow for many applications.

export default defineNuxtConfig({
  skewProtection: {
    checkForUpdateStrategy: 'polling'
  },
  experimental: {
    checkOutdatedBuildInterval: 5 * 60 * 1000 // 5 minutes
  }
})

SSE

Real-time updates using Server-Sent Events. SSE does keep persistent connections open, be mindful of this if you have a high-traffic site. SSE has less overhead than WebSockets.

export default defineNuxtConfig({
  skewProtection: {
    checkForUpdateStrategy: 'sse'
  }
})

WebSocket

Real-time updates using WebSockets. These are mostly useless as SSE is more performant however for certain conditions like using Cloudflare Workers and some proxying services, WebSockets may be the best option.

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-durable',
    experimental: {
      websockets: true
    }
  },
  skewProtection: {
    checkForUpdateStrategy: 'ws'
  }
})