nuxt4-patternslisted

# Nuxt 4 Patterns ## Route rules Rendering and caching strategy per route group in `nuxt.config.ts`: ```ts export default defineNuxtConfig({ routeRules: { '/': { prerender: true }, // static HTML at build time '/products/**': { swr: 3600 }, // serve cached, revalidate in background '/blog/**': { isr: true }, // incremental static regeneration (platform-dependent) '/admin/**': { ssr: false }, // client-rendered route '/api/**': { cache: { maxAge: 3600 } } // Nitro response cache; `redirect` also available }, }) ``` Pick rules per route group (marketing vs catalog vs dashboard vs API), not one global strategy. `swr` takes seconds; `isr` accepts `true` or a seconds value on platforms that support it (e.g. Vercel). ## Data fetching - `await useFetch('/api/...')` for SSR-safe page/component reads: server-fetched data goes into the Nuxt payload, so hydration does not refetch. - `useAsyncData(key, handler)` when the fetcher is not a plain `$fetch` call, needs a custom key, or composes multiple sources. Give it a stable key; handlers run during SSR and hydration, so keep them side-effect free. - `$fetch()` directly only for user-triggered writes or client-only actions — top-level `$fetch` in setup runs twice (server and client) with no payload transfer. - `lazy: true` / `useLazyFetch` / `useLazyAsyncData` for non-critical data that should not block navigation; render on `status === 'pending'`. - `server: false`