skills.rest
xxih
xxihCOMMUNITY
Explore all skills by this author →
GitHub

nuxt4-patterns

Diagnose Nuxt 4 SSR hydration and routing issues in data-fetch patterns.

1|Updated Mar 18, 2026
Search Tags:#ssr#hydration#nuxt4#route-rules#usefetch#useasyncdata#lazy-hydration
One-click install
npx skills add https://github.com/xxih/ai-harness-zh --skill nuxt4-patterns-xxih
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt4-patterns
Source: https://github.com/xxih/ai-harness-zh/tree/main/references/translations/everything-claude-code/docs/zh-CN/skills/nuxt4-patterns
Command: npx skills add https://github.com/xxih/ai-harness-zh --skill nuxt4-patterns-xxih

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers identify and fix Nuxt 4 SSR and hydration mismatches, routing rendering decisions, and inefficient data-fetch patterns that cause broken UI, duplicate requests, or oversized payloads.

Core Features & Use Cases

  • Hydration safety guidance: Identify server-only vs client-only logic and show where to move browser-only APIs to onMounted, ClientOnly, or .client.vue boundaries.
  • SSR-safe data fetching: Recommend when to use useFetch, useAsyncData, lazy fetches, or server: false and how to provide stable keys and avoid side effects.
  • Route rendering strategies: Advise routeRules for prerender, swr, isr, ssr:false and Nitro cache behaviors to match SEO and freshness needs.
  • Performance patterns: Suggest lazy-loading, delayed hydration, payload trimming with pick, and component splitting to reduce initial payload and improve TTI.
  • Use Case: Debug a blog with hydration mismatches and update data fetching to use useAsyncData with stable keys while applying routeRules for ISR.

Quick Start

Use the nuxt4-patterns guidance to diagnose hydration mismatches, convert unsafe SSR code to client-only hooks, and recommend routeRules and lazy loading strategies.

Frequently Asked Questions about nuxt4-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix Nuxt 4 SSR hydration mismatches?▼

Ensure SSR-safe data fetching in Nuxt 4 by using useFetch or useAsyncData with stable keys and lazy fetch options. This prevents side effects and duplicate requests while optimizing payload delivery during server-side rendering.

When should I use routeRules for prerender, swr, or isr in Nuxt?▼

Use Nuxt routeRules to configure prerender, swr, isr, or ssr:false behaviors based on your SEO and data freshness needs. This matches Nitro cache behaviors to specific route rendering strategies for optimal performance.

What's the best way to optimize Nuxt 4 payload size and improve TTI?▼

Optimize Nuxt 4 payload size and improve TTI by applying lazy-loading, delayed hydration, and payload trimming with pick. Component splitting further reduces the initial payload for faster time to interactive.

Why does my Nuxt 4 application make duplicate data requests during SSR?▼

Duplicate data requests during Nuxt 4 SSR often occur from unstable keys or side effects in useAsyncData. Resolve this by providing stable keys and ensuring SSR-safe data fetching patterns without client-only side effects.

Related Skills

Explore More Software Engineering Skills→
hieuckhieuck

nuxt4-patterns

Solve hydration mismatches and SSR pitfalls in Nuxt 4 apps.

Community
Intermediate
newkubnewkub

nitro

Guide Nitro server development across Node.js, Deno, and Cloudflare Workers.

Community
Intermediate
PatternsDevPatternsDev
235

progressive-hydration

Defer non-critical JavaScript in SSR React apps to improve Time to Interactive.

Official
Intermediate
ngxtmngxtm

Next.js Rendering Strategies

Explain Next.js rendering strategies including SSG, ISR, SSR, and PPR.

Community
Intermediate