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

## 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), modern servers can typically handle thousands of idle connections.

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

SSE/WebSocket connections start when a component using [`<SkewNotification>`{lang="html"}](/docs/skew-protection/api/skew-notification) or [`useSkewProtection()`{lang="ts"}](/docs/skew-protection/api/use-skew-protection) mounts.

Place `<SkewNotification>`{lang="html"} on specific pages to choose where connections start.

::note
The connection stays open for the session, including after navigation. Use [`disconnect()`{lang="ts"}](/docs/skew-protection/api/use-skew-protection#disconnect) if you need to close it manually.
::

### Page-Specific Protection

Add `<SkewNotification>`{lang="html"} or `useSkewProtection()`{lang="ts"} 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>
```

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`{lang="ts"}](/docs/skew-protection/api/use-skew-protection#options) and call `connect()`{lang="ts"}:

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

## 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()`{lang="ts"} 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()`{lang="ts"} 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()`{lang="ts"}](/docs/skew-protection/api/use-active-connections) stats

No further configuration is needed.

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.