Nuxt•2d ago

Nuxt 2 setting "Vary: User-Agent" in header

Hello, I'm using Nuxt 2 with SSR. We discovered that the Vary header entry is somewhere being set to user-agent. After looking for a while I found it, it's being set here in the vue-renderer.js

render(renderContext) {
    if (this.isServerMode) {
      renderContext.res.setHeader("Vary", "User-Agent");
    }
    return super.render(renderContext);
  }

render(renderContext) {
    if (this.isServerMode) {
      renderContext.res.setHeader("Vary", "User-Agent");
    }
    return super.render(renderContext);
  }

Can someone explain to me why it's here and if I can have a workaround to not use it? I'm not 100% sure but backend things it's bad for server performance (requesting for every different user agent)

7 Replies

kapa.ai•2d ago

Hi @Jay. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but I don't have enough information in the provided knowledge sources to directly answer your question about Nuxt 2 and the "Vary: User-Agent" header setting. The knowledge sources primarily contain information about Nuxt 3 and don't mention this specific Nuxt 2 behavior. However, I can provide some general information about headers in Nuxt 3, which might be helpful if you're considering upgrading: In Nuxt 3, you have more control over response headers. You can use the useResponseHeader composable to set custom headers on a per-page or global basis. For example:

const header = useResponseHeader('X-My-Header');
header.value = 'my-value';

const header = useResponseHeader('X-My-Header');
header.value = 'my-value';

This can be used in pages, components, or even in middleware to set headers Docs > Api > Composables > useResponseHeader (https://nuxt.com/docs/api/composables/use-response-header). If you need to disable certain Nuxt SSR behaviors, Nuxt 3 offers experimental features like respectNoSSRHeader, which allows disabling Nuxt SSR responses by setting the x-nuxt-no-ssr header Docs > Guide > Going-further > Experimental Features > respectNoSSRHeader (https://nuxt.com/docs/guide/going-further/experimental-features#respectnossrheader). For your specific Nuxt 2 issue, I recommend checking the Nuxt 2 documentation or reaching out to the Nuxt community forums for more targeted assistance, as the information provided here is not sufficient to address your particular concern about the "Vary: User-Agent" header in Nuxt 2. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@103820307080437760> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

manniL•2d ago

do you have a link to the code on e.g. GitHub for it? vary + user agent is often used to ensure caching works with mobile detection based on the user agent (or similar cases)

JayOP•2d ago

I only found the npmjs page for it https://www.npmjs.com/package/@nuxt/vue-renderer?activeTab=code if you check the code and look for Vary you will find it.

npm

@nuxt/vue-renderer

Latest version: 2.18.1, last published: 6 months ago. Start using @nuxt/vue-renderer in your project by running npm i @nuxt/vue-renderer. There are 4 other projects in the npm registry using @nuxt/vue-renderer.

manniL•2d ago

ahh @Jay that is because of modern mode if you have modern mode enabled, then other files are sent based on the browser, so the user agent (e.g. non-transpiled code) you don't want to cache the wrong stuff there and accidentally break user builds what you can do is disabling modern mode (then browsers will use the transpiled code but things will work) and you can cache it all

JayOP•2d ago

interesting! thanks a lot Alex. 👑

manniL•2d ago

no problem! ☺️

Gaming

Programming

Nuxt 2 setting "Vary: User-Agent" in header