Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In Nuxt server-side rendering (SSR), ref() is safe when its lifetime belongs to a component instance. The danger is creating a mutable ref once at module scope on the server: that module can remain loaded across requests, allowing one user’s value to be visible to another. Use Nuxt’s keyed useState() for SSR-aware state that components share, and keep component-only values inside setup() or <script setup>.
How can Nuxt state leak across users?
The key issue is not that ref() is inherently unsafe. It is where the ref is created and how long it lives. A ref created inside a component’s setup() belongs to that component instance. A ref created at the top level of a server-side module is created when the module is evaluated, and the server process may reuse that module for later requests.
If request A writes user-specific data into that long-lived object and request B reads it, the value can cross the request boundary. Depending on what is stored, that can expose personal information, credentials, or cart contents. Nuxt’s State Management guide warns against defining shared refs outside <script setup> or setup().
// Avoid in SSR: this is created once when the module is evaluated.
export const currentUser = ref<User | null>(null)Because this object belongs to a long-lived module rather than an individual request, do not use a server-wide mutable singleton for user-specific data.
#1 Best Overall
When should you use `ref()`?
For state owned by one component
A local ref is a good fit for reactive values that belong to a component instance, such as whether a disclosure is open. Create it in that component’s setup context:
<script setup lang="ts">
const isOpen = ref(false)
</script>Each component instance gets its own value. Use this pattern when other components do not need to share the state.
For shared state outside the component tree
Do not move a ref into a module-level export merely to make it available to several components during SSR. Nuxt’s recommended approach is a composable that calls useState() with a stable key:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →// composables/useCart.ts
export const useCart = () => useState<CartItem[]>('cart', () => [])Within the Nuxt application context, consumers using that key share the associated state. The key identifies which state they are accessing; the initializer supplies its initial value when needed. Nuxt describes useState as reactive, SSR-friendly shared state in its API documentation.
How do `ref()` and `useState()` differ in SSR?
| Question | ref() in component setup |
useState() |
|---|---|---|
| What scope does it serve? | One component instance. | Shared Nuxt state identified by a key. |
| When is it appropriate? | For local UI or other state that the component owns. | When Nuxt components need to share state in an SSR-aware way. |
| What is the SSR concern? | Safe when created in the component’s setup context; risky when a mutable ref is created once at server module scope and reused across requests. | Designed for shared state that works with SSR and hydration. |
| What can the state contain? | Values suitable for the component’s use. | Values that can be serialized into Nuxt’s JSON payload, unless custom serialization is configured. |
What should you store in `useState()`?
Nuxt serializes useState() data as JSON for the server-rendered page’s payload. Store JSON-serializable data, such as plain objects, arrays, strings, numbers, booleans, or null. Nuxt cautions that classes, functions, and symbols do not serialize as ordinary JSON values; use custom serialization if your application needs to preserve such values.
Choose a stable key for each logical piece of shared state, and ensure the initializer is safe to run when Nuxt needs the initial value. For authentication- or tenant-specific data, keep the framework’s request and data-fetching boundaries explicit rather than assuming a global mutable variable is isolated per user.
How does hydration affect the choice?
With SSR, Nuxt renders HTML on the server and sends it with associated data to the browser. The browser then hydrates the page by creating the client application, matching it to the rendered output, and attaching event listeners. If the initial server and client values differ, users can see hydration mismatch symptoms.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteNuxt’s lifecycle guide explains the SSR and hydration flow and advises using SSR-friendly data composables so data fetched on the server can be reused during hydration. A state design should therefore account for both where the value lives and whether the browser starts with data consistent with the server-rendered page.
Best Value
Which pattern should you choose?
- One component owns the value: create a
ref()inside itssetup()or<script setup>. - Several parts of the Nuxt app must share SSR-aware state: expose
useState()through a composable with a stable key. - The value contains user-specific data: do not put it in a mutable ref exported from a server module.
- The state must survive SSR and hydration: use a serializable value and keep the initial server and client data consistent.
Does Nuxt version matter?
Check the Nuxt major version used by your project before following version-specific documentation. Nuxt’s v3 state guide identifies itself as version 3.21.11 and states that Nuxt 3 reached end of life on July 31, 2026, directing users to Nuxt 4 or extended support. The module-scope singleton risk comes from the object’s lifetime across server requests; it is not a claim that every minor version or hosting adapter behaves identically.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
