skills.rest
Maelwalser
MaelwalserCOMMUNITY
Explore all skills by this author →
GitHub

nuxt4-patterns

Resolve Nuxt 4 hydration mismatches and SSR/client markup divergence.

Updated Aug 23, 2026
Search Tags:#ssr#hydration#nuxt4#route-rules#usefetch#useasyncdata#lazy-hydration
One-click install
npx skills add https://github.com/Maelwalser/claude-config --skill nuxt4-patterns-maelwalser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt4-patterns
Source: https://github.com/Maelwalser/claude-config/tree/main/skills/nuxt4-patterns
Command: npx skills add https://github.com/Maelwalser/claude-config --skill nuxt4-patterns-maelwalser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Nuxt 4 apps often suffer from hydration mismatches, inefficient route-level rendering, oversized payloads, and incorrect data-fetching patterns that cause double requests or inconsistent client/server markup. This Skill provides practical patterns to make the first SSR render deterministic, select appropriate route rendering strategies, and safely migrate browser-only logic to the client.

Core Features & Use Cases

  • Hydration Safety: Guidance to eliminate non-deterministic values on the server and move browser-only logic behind onMounted, import.meta.client, ClientOnly, or .client.vue components.
  • Data Fetching Patterns: Recommendations for when to use useFetch, useAsyncData, stable keys, lazy fetching, and server:false to balance SEO and runtime performance.
  • Route Rules & Caching: How to use routeRules for prerender, swr, isr, ssr:false, and Nitro cache controls to match SEO, freshness, and latency requirements.
  • Performance & Lazy Hydration: Tactics for code-splitting, lazy components, and lazy hydration strategies for heavy interactive islands.
  • Use Case Example: Diagnose a blog article page that shows hydration mismatches and large payloads; move comment fetching to lazy useFetch with server:false and give useAsyncData a stable key for the article body.

Quick Start

Analyze a Nuxt 4 page with a hydration mismatch and produce a prioritized remediation plan covering useFetch/useAsyncData adjustments, routeRules changes, and lazy-hydration or client-only segregation.

Frequently Asked Questions about nuxt4-patterns

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

FAQPage Schema
How do I fix hydration mismatches in my Nuxt 4 application?▼

Fix Nuxt 4 hydration mismatches by ensuring deterministic first renders and moving browser-only logic to onMounted, import.meta.client, ClientOnly, or .client.vue components to prevent SSR and client markup divergence.

What is the best way to prevent double data requests with useFetch and useAsyncData in Nuxt 4?▼

Prevent double data requests in Nuxt 4 by using stable cache keys for useAsyncData, applying lazy fetching, and configuring server:false when appropriate. This balances SEO requirements with runtime performance.

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

Use Nuxt routeRules for prerender, swr, isr, or ssr:false to match specific SEO, freshness, and latency requirements. Configuring Nitro cache controls optimizes route-level rendering strategies for your application.

Does Nuxt 4 support lazy hydration for heavy interactive components?▼

Yes, Nuxt 4 supports lazy hydration tactics for heavy interactive islands. By applying code-splitting, lazy components, and hydration strategies, you can optimize performance and reduce initial payload sizes.

Why does my Nuxt server-side rendering return non-deterministic values causing inconsistent markup?▼

Nuxt server-side rendering returns non-deterministic values when browser-only logic leaks into server execution. Eliminate these values on the server and segregate client-specific code to ensure a stable SSR render.

Can I use useFetch to load comments on the client only to reduce initial SSR payload size?▼

Yes, you can move comment fetching to a lazy useFetch with server:false to reduce initial SSR payload size. This pattern is effective for non-critical content that does not need SEO indexing.

Related Skills

Explore More Software Engineering Skills→
richardnpaulrichardnpaul

nuxt4-patterns

Apply hydration-safe SSR patterns for Nuxt 4 apps using useFetch and useAsyncData.

Community
Intermediate
mitul-bhatiamitul-bhatia

nuxt4-patterns

Apply Nuxt 4 patterns for hydration-safe SSR data fetching and route rules.

Community
Intermediate
jaypatrickjaypatrick

angular-ssr

Configure server-side rendering and hydration for Angular v20+ projects.

Community
Advanced
xxihxxih
1

nuxt4-patterns

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

Community
Intermediate