skills.rest
samymity
samymityCOMMUNITY
Explore all skills by this author →
GitHub

nuxt4-patterns

Enforce SSR-safe rendering and data fetching patterns in Nuxt 4 pages.

1|Updated Mar 3, 2026
Search Tags:#ssr#hydration#nuxt4#route-rules#usefetch#useasyncdata#lazy-hydration
One-click install
npx skills add https://github.com/samymity/bridge-ventures-backend --skill nuxt4-patterns-samymity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt4-patterns
Source: https://github.com/samymity/bridge-ventures-backend/tree/main/.claude/skills/nuxt4-patterns
Command: npx skills add https://github.com/samymity/bridge-ventures-backend --skill nuxt4-patterns-samymity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Nuxt 4 apps often produce hydration mismatches and duplicate network requests when server-rendered markup diverges from client state or when data fetching is done at the wrong lifecycle. This skill helps you apply reliable Nuxt 4 patterns so SSR, hybrid rendering, and route-level behavior stay consistent.

Core Features & Use Cases

  • Hydration Safety: Keep the first SSR render deterministic by avoiding browser-only APIs and non-deterministic values in SSR-rendered template state, using Nuxt routing composables, and moving client-only logic behind mounted/client-only boundaries.
  • SSR-Safe Data Fetching: Prefer await useFetch and useAsyncData for page/component data that must be present in the initial payload, use stable keys, and reserve $fetch for user-triggered writes to avoid second-fetch issues.
  • Route Rules + Performance: Apply routeRules for prerender/SWR/ISR/ssr:false decisions, and use lazy loading and lazy hydration for non-critical UI to reduce payload size and improve perceived performance.

Quick Start

Ask for a Nuxt 4 SSR refactor plan to eliminate a hydration mismatch by updating data fetching to use await useFetch or useAsyncData, adjusting routeRules, and converting any client-only logic to onMounted or ClientOnly.

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 hydration mismatches during SSR?▼

Fix Nuxt 4 hydration mismatches by ensuring the first SSR render is deterministic. Avoid browser-only APIs in templates, use Nuxt routing composables, and move client-only logic behind onMounted or ClientOnly boundaries.

What is the best way to prevent duplicate network requests in Nuxt server-side rendering?▼

Prevent duplicate network requests by using await useFetch or useAsyncData for initial page data instead of $fetch. Reserve $fetch strictly for user-triggered writes to avoid second-fetch execution issues.

When should I use routeRules versus lazy hydration in Nuxt 4?▼

Use routeRules for route-level rendering decisions like prerender, SWR, ISR, or ssr:false. Apply lazy hydration and lazy loading to non-critical UI components to reduce payload size and improve perceived performance.

Why does useAsyncData need stable keys for route-parameter-driven data loading?▼

Stable useAsyncData keys ensure consistent data caching and payload hydration across server and client. Without stable keys, route-parameter-driven data loading can produce inconsistent state and hydration mismatches.

Can I use $fetch for initial page data in Nuxt 4 hybrid rendering?▼

Avoid using $fetch for initial page data in Nuxt 4 hybrid rendering. It bypasses the SSR payload, causing second-fetch issues; useFetch and useAsyncData ensure data is present in the initial server payload.

Does Nuxt 4 support disabling SSR for specific routes?▼

Yes, Nuxt 4 supports disabling SSR for specific routes. Configure routeRules with ssr:false to render designated routes entirely on the client side while maintaining SSR for other pages.

Related Skills

Explore More Software Engineering Skills→
JamkrisJamkris
86

nuxt4-patterns

Standardize hydration-safe patterns and data fetching for Nuxt 4 SSR apps.

Community
Advanced
SnakeOSnakeO
9

debug:nuxtjs

Diagnose and resolve Nuxt.js SSR, hydration, and Nitro issues.

Community
Advanced
Simon-He95Simon-He95
2.9k

markstream-nuxt

Integrate markstream-vue into Nuxt 3 or Nuxt 4 with SSR-safe client-only boundaries.

Community
Intermediate
richardnpaulrichardnpaul

nuxt4-patterns

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

Community
Intermediate