1---
2title: Mounted and Unmounted Hooks Do Not Run During SSR
3impact: MEDIUM
4impactDescription: SSR applications may fail if mounted-only code is essential for functionality
5type: capability
6tags: [vue3, lifecycle, ssr, server-side-rendering, nuxt, onMounted, mounted, hydration]
7---
8 
9# Mounted and Unmounted Hooks Do Not Run During SSR
10 
11**Impact: MEDIUM** - During server-side rendering (SSR), lifecycle hooks like `mounted`, `onMounted`, `unmounted`, and `onUnmounted` are never called on the server. This can cause differences between server-rendered and client-rendered content, hydration mismatches, and missing functionality if critical logic is placed only in these hooks.
12 
13On the server, only `beforeCreate`, `created`, and their Composition API equivalents run. Client-specific operations (DOM access, browser APIs, third-party libraries) must be in mounted hooks, but you must handle the SSR case appropriately.
14 
15## Task Checklist
16 
17- [ ] Place browser-specific code (window, document, localStorage) in mounted/onMounted
18- [ ] Ensure critical data fetching happens in hooks that run on server (created)
19- [ ] Handle hydration mismatches for content that differs client vs server
20- [ ] Use `<ClientOnly>` wrapper (Nuxt) or conditional rendering for client-only components
21- [ ] Check for browser environment before using browser APIs
22 
23**Incorrect:**
24```javascript
25// WRONG: Accessing browser APIs in created - breaks SSR
26export default {
27  created() {
28    // These don't exist on the server!
29    this.width = window.innerWidth // ReferenceError: window is not defined
30    this.savedData = localStorage.getItem('data') // ReferenceError: localStorage is not defined
31  }
32}
33```
34 
35```javascript
36// WRONG: Critical initialization only in mounted - won't run on server
37export default {
38  data() {
39    return { user: null }
40  },
41  async mounted() {
42    // This won't run on server - page renders without user data
43    // Then hydrates with user data - causes flash of content
44    this.user = await fetchCurrentUser()
45  }
46}
47```
48 
49**Correct:**
50```javascript
51// CORRECT: Data fetching in created (runs on server), DOM in mounted
52export default {
53  data() {
54    return {
55      user: null,
56      windowWidth: 0
57    }
58  },
59  async created() {
60    // This runs on both server and client
61    this.user = await fetchCurrentUser()
62  },
63  mounted() {
64    // Browser-specific code safely in mounted
65    this.windowWidth = window.innerWidth
66    window.addEventListener('resize', this.handleResize)
67  },
68  unmounted() {
69    window.removeEventListener('resize', this.handleResize)
70  }
71}
72```
73 
74```vue
75<!-- CORRECT: Composition API with SSR awareness -->
76<script setup>
77import { ref, onMounted, onUnmounted } from 'vue'
78 
79const user = ref(null)
80const windowWidth = ref(0)
81 
82// This runs on both server and client (during setup)
83user.value = await useFetch('/api/user')
84 
85// These only run on client
86onMounted(() => {
87  windowWidth.value = window.innerWidth
88  window.addEventListener('resize', handleResize)
89})
90 
91onUnmounted(() => {
92  window.removeEventListener('resize', handleResize)
93})
94 
95function handleResize() {
96  windowWidth.value = window.innerWidth
97}
98</script>
99```
100 
101## Checking for Browser Environment
102 
103```javascript
104// CORRECT: Guard browser API access
105export default {
106  data() {
107    return { theme: 'light' }
108  },
109  created() {
110    // Check if we're in browser before accessing browser APIs
111    if (typeof window !== 'undefined') {
112      this.theme = localStorage.getItem('theme') || 'light'
113    }
114  },
115  mounted() {
116    // mounted only runs in browser, so this is always safe
117    this.applyTheme()
118  }
119}
120```
121 
122## Nuxt.js Specific Patterns
123 
124```vue
125<!-- CORRECT: Using Nuxt's ClientOnly for client-specific components -->
126<template>
127  <div>
128    <!-- This content renders on both server and client -->
129    <h1>Dashboard</h1>
130 
131    <!-- This only renders on client - no hydration mismatch -->
132    <ClientOnly>
133      <ChartComponent :data="chartData" />
134      <template #fallback>
135        <p>Loading chart...</p>
136      </template>
137    </ClientOnly>
138  </div>
139</template>
140```
141 
142```javascript
143// CORRECT: Using Nuxt's process.client/process.server
144export default {
145  created() {
146    if (process.client) {
147      // Only runs in browser
148      this.initAnalytics()
149    }
150    if (process.server) {
151      // Only runs on server
152      this.logServerRequest()
153    }
154  }
155}
156```
157 
158## Handling Hydration Mismatches
159 
160```vue
161<script setup>
162import { ref, onMounted } from 'vue'
163 
164// Start with a value that matches what server renders
165const currentTime = ref(null)
166 
167onMounted(() => {
168  // Update to real value only on client
169  // This prevents hydration mismatch
170  currentTime.value = new Date().toLocaleTimeString()
171})
172</script>
173 
174<template>
175  <!-- Renders null on server, then updates on client -->
176  <span v-if="currentTime">{{ currentTime }}</span>
177  <span v-else>Loading...</span>
178</template>
179```
180 
181## Reference
182- [Vue.js SSR Guide](https://vuejs.org/guide/scaling-up/ssr.html)
183- [Nuxt.js Lifecycle](https://nuxt.com/docs/api/composables/use-nuxt-app#lifecycle-hooks)
184- [Vue SSR Hydration](https://vuejs.org/guide/scaling-up/ssr.html#client-hydration)
185