perf: do not regenerate flags on the client if set during SSR

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.
 

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<Device>('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,
     },
   }
 })