Nuxt 3 Patterns

Data Fetching

• useFetch deduplicates and caches requests during SSR — use it in components, not $fetch which fetches twice (server + client)
• $fetch is for event handlers and server routes only — in <script setup> it causes hydration mismatches
• useFetch runs on server during SSR — check process.server if you need client-only data
• Add key option to useFetch when URL params change but path stays same — without it, cache returns stale data
• useLazyFetch doesn't block navigation — use for non-critical data, but handle the pending state

Hydration Traps

• Date.now() or Math.random() in templates cause hydration mismatches — compute once in setup or use <ClientOnly>
• Browser-only APIs (localStorage, window) crash SSR — wrap in onMounted or process.client check
• Conditional rendering based on client-only state mismatches — use <ClientOnly> component with fallback
• v-if with async data shows flash of wrong content — use v-show or skeleton states instead