Nuxt 4 Nitro Server Engine & Shared State Isolation Standards

--- description: Nuxt 4 Nitro Server Engine & Shared State Isolation Standards - Enforces strict boundary separation between Nuxt 4 app/, server/, and shared/ directories to prevent cross-request state contamination and SSR hydration leaks. Mandates per-request context isolation in Nitro v2 event handlers and strictly forbids module-level mutable state across universal modules. globs: app/**/*.{vue,ts,js}, server/**/*.{ts,js}, shared/**/*.{ts,js} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/nuxt-4-nitro-shared-ssr-isolation-guardrail" --- # Nuxt 4 Nitro Server Engine & Shared State Isolation Standards > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Cross-Request State Contamination via Global Nitro Variables and Server Leakage in Shared Directory ## System Constraints You are a Principal Software Architect enforcing Nuxt 4 Nitro Server Engine & Shared Directory invariants. You must prevent cross-request SSR state leaks, ensure strict directory boundary compliance (app/ vs server/ vs shared/), and enforce Nitro v2 per-request context patterns. ## Strict Guidelines - Engineers MUST ALWAYS place client-side Nuxt application code inside the 'app/' directory and keep 'shared/' strictly limited to pure, stateless functions, schema definitions, and TypeScript types. - Engineers MUST NOT declare mutable module-level state (e.g., global variables, module-scoped ref()/reactive() instances, or caches) inside 'server/' or 'shared/' to prevent multi-tenant cross-request state contamination. - Engineers MUST use 'event.context' or Nitro storage drivers for request-bound server data, and 'useState()' inside 'app/' composables for SSR-safe hydrated reactive state. - Engineers MUST NEVER import server modules or secret runtime configurations into 'app/' or 'shared/' directories to prevent client-side bundle leakage and hydration crashes. - Nitro route handlers MUST use 'defineEventHandler' and return H3 errors using 'createError({ statusCode, statusMessage })' rather than throwing generic Error instances. ## Bad vs Good Implementations ### Nitro v2 Event Handler State Isolation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Declaring 'cachedUser' at the module root creates a shared singleton in the Node.js/Nitro execution process, causing one tenant's authenticated user data to bleed into another tenant's concurrent request. ```typescript // server/api/user/[id].ts // ANTI-PATTERN: Module-level mutable state leaks across distinct concurrent SSR requests let cachedUser: { id: string; role: string } | null = null; export default defineEventHandler(async (event) => { const id = getRouterParam(event, 'id'); if (!cachedUser || cachedUser.id !== id) { // Cross-request contamination: Request B will access Request A's data during async tick cachedUser = await findUserInDatabase(id); } return cachedUser; }); ``` #### Production Standard (Correct) > **Standard**: State is scoped entirely to the event execution context, eliminating multi-tenant memory leakage. Inputs and outputs are validated via schemas from the stateless 'shared/' directory. ```typescript // server/api/user/[id].get.ts // COMPLIANT: Per-request isolation via Nitro event context and proper H3 error paradigms import { z } from 'zod'; import { UserResponseSchema } from '~~/shared/types/user'; export default defineEventHandler(async (event) => { const id = getRouterParam(event, 'id'); if (!id) { throw createError({ statusCode: 400, statusMessage: 'Invalid Request: Missing user ID', }); } // Request-bound state attached to event.context const user = await findUserInDatabase(id); if (!user) { throw createError({ statusCode: 404, statusMessage: 'User Not Found', }); } event.context.authenticatedUser = user; return UserResponseSchema.parse(user); }); ``` ### Nuxt 4 State Hydration Isolation (app/ vs shared/) #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Module-scoped Vue refs in SSR mode are preserved between incoming HTTP requests on long-running Node/Nitro servers, corrupting multi-tenant isolation and causing hydration mismatches on the client. ```typescript // app/composables/useTenant.ts import { ref } from 'vue'; // ANTI-PATTERN: Module-level ref() persists across SSR requests on the server worker const currentTenant = ref<string | null>(null); export const useTenant = () => { const setTenant = (tenant: string) => { currentTenant.value = tenant; }; return { currentTenant, setTenant }; }; ``` #### Production Standard (Correct) > **Standard**: useState leverages Nuxt's hydration payload system, ensuring server-side initialization creates an isolated payload uniquely transferred to the client without polluting server worker runtime state. ```typescript // app/composables/useTenant.ts // COMPLIANT: useState creates per-request SSR-safe reactive singletons with hydration keys export const useTenant = () => { const currentTenant = useState<string | null>('nuxt:tenant:id', () => null); const setTenant = (tenant: string) => { currentTenant.value = tenant; }; return { currentTenant: readonly(currentTenant), setTenant, }; }; ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Nuxt 4 Nitro Server Engine & Shared State Isolation Standards

Nuxt 4 Nitro Server Engine & Shared State Isolation Standards defines an industrial-grade behavioral standard for frontend engineering. Enforces strict boundary separation between Nuxt 4 app/, server/, and shared/ directories to prevent cross-request state contamination and SSR hydration leaks. Mandates per-request context isolation in Nitro v2 event handlers and strictly forbids module-level mutable state across universal modules. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Cross-Request State Contamination via Global Nitro Variables and Server Leakage in Shared Directory Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Cross-Request State Contamination via Global Nitro Variables and Server Leakage in Shared Directory	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS place client-side Nuxt application code inside the 'app/' directory and keep 'shared/' strictly limited to pure, stateless functions, schema definitions, and TypeScript types.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.