From 2ab15bb292b5c5a55c503d592e9d00d93b795f97 Mon Sep 17 00:00:00 2001 From: Damian Glowala Date: Tue, 29 Sep 2026 21:53:43 +0200 Subject: [PATCH] perf: do not regenerate flags on the client if set during SSR --- README.md | 2 +- src/runtime/plugin.ts | 19 +++++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a4684ce..6c8b199 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,7 @@ definePageMeta({ ## Static Generation -Static generation (e.g. `nuxt generate`) is not supported. Prerendered pages are rendered once at build time without a user agent, so they are always rendered as a desktop. +Static generation (e.g. `nuxt generate`) is not supported. Prerendered pages are rendered once at build time without a user agent, so they are always treated as a desktop. Similarly, responses cached on the server (e.g. with `swr` or `isr` route rules) keep the flags of the request they were cached from. To detect the device on each request, deploy with `nuxt build` instead. For a client-side only app, set `ssr: false` to detect the device in the browser. diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts index 4d75c72..c322389 100644 --- a/src/runtime/plugin.ts +++ b/src/runtime/plugin.ts @@ -1,23 +1,22 @@ import type { Plugin } from 'nuxt/app' import type { Device } from './types' import generateFlags from './generateFlags' -import { defineNuxtPlugin, reactive, useRequestHeaders } from '#imports' +import { defineNuxtPlugin, useRequestHeaders, useState } from '#imports' const plugin: Plugin<{ device: Device }> = defineNuxtPlugin(() => { - let flags: Device + const flags = useState('nuxt-device', () => { + if (import.meta.server) { + const headers = useRequestHeaders() - if (import.meta.server) { - const headers = useRequestHeaders() + return generateFlags(headers['user-agent'] || '', headers) + } - flags = reactive(generateFlags(headers['user-agent'] || '', headers)) - } - else { - flags = reactive(generateFlags(navigator.userAgent)) - } + return generateFlags(navigator.userAgent) + }) return { provide: { - device: flags, + device: flags.value, }, } })