Performance

Connection Overhead

SSE and WebSocket strategies maintain persistent connections to your server. For small to medium applications (under 10,000 concurrent users), modern servers can typically handle thousands of idle connections.

For high-traffic applications (10,000+ concurrent users), use an Adapter with Ably or Pusher. These services handle millions of concurrent connections and include automatic reconnection, global edge distribution, and connection multiplexing.

Selective Route Protection

SSE/WebSocket connections start when a component using <SkewNotification> or useSkewProtection() mounts.

Place <SkewNotification> on specific pages to choose where connections start.

Page-Specific Protection

Add <SkewNotification> or useSkewProtection() only where needed:

<script setup lang="ts">
const skew = useSkewProtection()

skew.onAppOutdated(() => {
  // handle update
})
</script>

<template>
  <div>
    <SkewNotification v-slot="{ isAppOutdated, reload }">
      <button v-if="isAppOutdated" @click="reload">
        Update available
      </button>
    </SkewNotification>
    <!-- page content -->
  </div>
</template>

Route-Based Logic

Use route middleware or conditional rendering for more control:

<script setup lang="ts">
const route = useRoute()

const protectedRoutes = ['/dashboard', '/admin', '/settings']
const shouldProtect = computed(() =>
  protectedRoutes.some(r => route.path.startsWith(r))
)
</script>

<template>
  <div>
    <SkewNotification v-if="shouldProtect" v-slot="{ isAppOutdated, reload }">
      <button v-if="isAppOutdated" @click="reload">
        Update available
      </button>
    </SkewNotification>
    <slot />
  </div>
</template>

Users connect when they first visit a protected route. The connection stays open after they leave.

Lazy Connection Mode

To choose when a connection starts, set lazy: true and call connect():

<script setup lang="ts">
const skew = useSkewProtection({ lazy: true })

// Only connect after user starts checkout
function startCheckout() {
  skew.connect()
  // proceed with checkout...
}

// Disconnect when done
onBeforeRouteLeave(() => {
  skew.disconnect()
})
</script>

Bot Traffic Filtering

The module automatically excludes bot and crawler traffic from SSE/WebSocket connections when you install @nuxtjs/robots. This prevents bots from inflating connection counts and wasting server resources.

Setup

Install @nuxtjs/robots as a peer dependency:

npx nuxt module add @nuxtjs/robots

The module uses useBotDetection() from @nuxtjs/robots to detect bot user agents (Googlebot, Bingbot, etc.) and skip establishing real-time connections for them.

How It Works

When a bot visits your site:

1. useBotDetection() identifies the bot via user agent
2. The SSE/WebSocket connection is skipped entirely
3. The server does not maintain an update connection for the bot
4. Bot visits are excluded from useActiveConnections() stats

You need no further configuration.