Question
Nuxt 3.4 server/api routes missing default Cache‑Control headers in dev mode
Sky Cedar
0 reputation · 06 May 2020, 03:56 UTC
81.2K views1
Loading…
0 reputation · 06 May 2020, 03:56 UTC
Nuxt 3.4 introduced the Nitro serverless routing feature, moving from the legacy serverMiddleware approach to defining REST endpoints in the server/api directory. While this change simplifies route creation, it also removes the automatic Cache‑Control header that serverMiddleware used to inject.
During local development (running nuxt dev), responses from server/api routes are emitted without any caching headers, potentially allowing browsers or intermediaries to cache responses indefinitely. The official Nuxt 3 documentation does not specify how to configure these headers for dev mode, leaving developers to guess or manually set them via nitro.config.ts.
1) What is the recommended method to set default Cache‑Control headers for all server/api routes in development mode?
2) Does Nitro apply any default caching policy to server/api routes when building for production, or must headers be explicitly defined in nitro.config.ts?
3) Are there known differences between Nuxt 3.3 and 3.4 regarding automatic caching header application for serverless routes?
34775 reputation · 06 May 2020, 07:57 UTC
To ensure every server/api route sends a default Cache‑Control header while running nuxt dev, add a global Nitro plugin (or hook) that sets the header on the response.
nuxtjsserver/plugins/cache-control.ts:export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('request', (event) => {
// Adjust the value as needed for your dev workflow
event.node.res.setHeader('Cache-Control', 'no-store');
});
});
nitro.config.ts (create it if it doesn’t exist):export default defineNitroConfig({
plugins: ['~/server/plugins/cache-control']
});
npm run dev) and verify the header appears in the response (e.g., via browser dev tools or curl -I).In development mode Nitro skips the production middleware stack that would otherwise inject default caching directives. Consequently, header addition is left to user code, allowing developers to control caching behavior without interfering with hot‑module replacement.
Cache‑Control headers to server/api route responses unless explicitly set in the handler.event.node.res.setHeader('Cache-Control', 'no-store')) makes it appear in the response.nuxt build followed by nuxt preview restores the default header (typically public, max-age=0, must-revalidate) for production‑like builds.Cache‑Control header globally for all server/api routes.nuxt preview). Explicit headers in nitro.config.ts are only needed if you want to override that policy.serverMiddleware automatically injected a default Cache‑Control header. Nuxt 3.4’s move to Nitro serverless routing removed that automatic injection, so headers must be added manually in dev mode.Use comments to ask for clarification. Post a solution as an answer.
34,775 reputation · 06 May 2020, 11:53 UTC
Rather than a custom Nitro plugin, a global routeRules entry in nitro.config.ts can target /api/** and attach the desired Cache‑Control header to every matching response. Because route rules are evaluated by Nitro's router, the same rule applies in dev and in production builds, so the setting does not need to be duplicated per handler.
export default defineNitroConfig({
routeRules: {
'/api/**': { headers: { 'Cache-Control': 'no-cache, max-age=0' } }
}
})Restart nuxt dev and inspect a response with curl -I; the value should match the rule. This behavior depends on the Nitro version bundled with Nuxt 3.4, so confirm it against your installed version before relying on it.