with one click
nuxt4-patterns
// Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.
// Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.
| name | nuxt4-patterns |
| description | Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData. |
| origin | ECC |
Use when building or debugging Nuxt 4 apps with SSR, hybrid rendering, route rules, or page-level data fetching.
useFetch, useAsyncData, or $fetchDate.now(), Math.random(), browser-only APIs, or storage reads directly into SSR-rendered template state.onMounted(), import.meta.client, ClientOnly, or a .client.vue component when the server cannot produce the same markup.useRoute() composable, not the one from vue-router.route.fullPath to drive SSR-rendered markup. URL fragments are client-only, which can create hydration mismatches.ssr: false as an escape hatch for truly browser-only areas, not a default fix for mismatches.await useFetch() for SSR-safe API reads in pages and components. It forwards server-fetched data into the Nuxt payload and avoids a second fetch on hydration.useAsyncData() when the fetcher is not a simple $fetch() call, when you need a custom key, or when you are composing multiple async sources.useAsyncData() a stable key for cache reuse and predictable refresh behavior.useAsyncData() handlers side-effect free. They can run during SSR and hydration.$fetch() for user-triggered writes or client-only actions, not top-level page data that should be hydrated from SSR.lazy: true, useLazyFetch(), or useLazyAsyncData() for non-critical data that should not block navigation. Handle status === 'pending' in the UI.server: false only for data that is not needed for SEO or the first paint.pick and prefer shallower payloads when deep reactivity is unnecessary.const route = useRoute()
const { data: article, status, error, refresh } = await useAsyncData(
() => `article:${route.params.slug}`,
() => $fetch(`/api/articles/${route.params.slug}`),
)
const { data: comments } = await useFetch(`/api/articles/${route.params.slug}/comments`, {
lazy: true,
server: false,
})
Prefer routeRules in nuxt.config.ts for rendering and caching strategy:
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/products/**': { swr: 3600 },
'/blog/**': { isr: true },
'/admin/**': { ssr: false },
'/api/**': { cache: { maxAge: 60 * 60 } },
},
})
prerender: static HTML at build timeswr: serve cached content and revalidate in the backgroundisr: incremental static regeneration on supported platformsssr: false: client-rendered routecache or redirect: Nitro-level response behaviorPick route rules per route group, not globally. Marketing pages, catalogs, dashboards, and APIs usually need different strategies.
Lazy prefix to dynamically import non-critical components.v-if so the chunk is not loaded until the UI actually needs it.<template>
<LazyRecommendations v-if="showRecommendations" />
<LazyProductGallery hydrate-on-visible />
</template>
defineLazyHydrationComponent() with a visibility or idle strategy.NuxtLink for internal navigation so Nuxt can prefetch route components and generated payloads.useFetch or useAsyncData, not top-level $fetchInstinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents. v2.1 adds project-scoped instincts to prevent cross-project contamination.
Use this skill when inspecting Blender characters, rigs, poses, animation retargeting, ground contact, facing direction, or model-vs-motion alignment where screenshots alone are not enough.
Suggests manual context compaction at logical intervals to preserve context through task phases rather than arbitrary auto-compaction.
Use when managing an Uncloud cluster — deploying services, configuring Caddy ingress, adding static proxy routes for non-cluster devices, publishing ports, scaling, inspecting logs, or managing machines and volumes with the `uc` CLI.
自動Claude Codeループのパターンとアーキテクチャ — シンプルな順序パイプラインからRFC駆動マルチエージェントDAGシステムまで。
Angular コードを生成し、アーキテクチャ ガイダンスを提供します。プロジェクトの作成、コンポーネント、またはサービスを作成するとき、または反応性(シグナル、linkedSignal、リソース)、フォーム、依存性注入、ルーティング、SSR、アクセシビリティ(ARIA)、アニメーション、スタイリング(コンポーネント スタイル、Tailwind CSS)、テスト、または CLI ツール作成のベスト プラクティスについてトリガーされます。