---
title: "Performance"
description: "Optimize skew protection for high-traffic applications."
canonical_url: "https://nuxtseo.com/docs/skew-protection/guides/performance"
last_updated: "2026-05-09T10:31:33.791Z"
---

## Connection Overhead

SSE and [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/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](/docs/skew-protection/guides/update-strategies#adapter) with [Ably](/docs/skew-protection/providers/external#ably) or [Pusher](/docs/skew-protection/providers/external#pusher). These services handle millions of concurrent connections and include automatic reconnection, global edge distribution, and connection multiplexing.

## Selective Route Protection

The module does **not establish connections until** [`<SkewNotification>`](/docs/skew-protection/api/skew-notification) or [`useSkewProtection()`](/docs/skew-protection/api/use-skew-protection) mounts. 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 the module creates connections by placing `<SkewNotification>` only on specific pages.

<note>

Once connected, the connection persists for the session (even when navigating away from the page). This is intentional - once you're listening for updates, you keep listening. Use [`disconnect()`](/docs/skew-protection/api/use-skew-protection#disconnect) if you need to close it manually.

</note>

### Page-Specific Protection

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

```vue [pages/dashboard.vue]
<script setup lang="ts">
const skew = useSkewProtection()

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

```vue [pages/admin.vue]
<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:

```vue [layouts/default.vue]
<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`](/docs/skew-protection/api/use-skew-protection#lazy) to prevent auto-connect and manually control when connections are established:

```vue [pages/checkout.vue]
<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

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:

```bash
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()`](/docs/skew-protection/api/use-active-connections) stats

This is automatic - zero-config beyond installing `@nuxtjs/robots`.