Performance

Connection Overhead

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

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

Selective Route Protection

Connections are not established until <SkewNotification> or useSkewProtection() is used. The plugin only sets up infrastructure—actual SSE/WebSocket connections happen when a component using skew protection mounts.

This means you can control exactly when connections are created by placing <SkewNotification> only on specific pages.

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>

This reduces active connections to only users on protected routes.

Lazy Connection Mode

For fine-grained control, use lazy: true to prevent auto-connect and manually control when connections are established:

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

This is useful when you want connections only during specific user flows rather than entire pages.

Bot Traffic Filtering

Bot and crawler traffic is automatically excluded from SSE/WebSocket connections when @nuxtjs/robots is installed. This prevents bots from inflating connection counts and wasting server resources.

Setup

Install @nuxtjs/robots as a peer dependency:

npx nuxi 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. No server resources are consumed for bot traffic
4. Bot visits are excluded from useActiveConnections() stats

This is automatic—no configuration needed beyond installing @nuxtjs/robots.