skills.rest
llmh333
llmh333COMMUNITY
Explore all skills by this author →
GitHub

nuxt4-patterns

Standardizes Nuxt 4 SSR-safe data fetching and routing to prevent hydration mismatches and redundant client requests.

Updated Sep 13, 2025
Search Tags:#lazy loading#ssr#nuxt4#usefetch#useasyncdata#hydration safety#route rules
One-click install
npx skills add https://github.com/llmh333/employee_management_spring --skill nuxt4-patterns-llmh333
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt4-patterns
Source: https://github.com/llmh333/employee_management_spring/tree/main/.gemini/skills/nuxt4-patterns
Command: npx skills add https://github.com/llmh333/employee_management_spring --skill nuxt4-patterns-llmh333

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents hydration mismatches, redundant client fetches, and unstable SSR rendering in Nuxt 4 by enforcing safe patterns for initial HTML, routing, and page-level data loading.

Core Features & Use Cases

  • Hydration Safety: Ensures the first server render matches the hydrated client output by avoiding nondeterministic values and browser-only APIs in SSR-rendered state, and by using Nuxt-specific routing composables correctly.
  • SSR-Safe Data Fetching: Recommends await useFetch() and useAsyncData() with stable keys and predictable refresh behavior to avoid double requests and keep SSR payloads consistent; uses $fetch() for writes and user-triggered actions.
  • Route Rules & Performance Tuning: Uses routeRules for rendering/caching strategy and applies lazy loading/hydration practices to reduce payload size and improve interactivity without breaking SSR expectations.

Use case example: A product detail page that depends on route.params.slug avoids a second fetch and stays hydration-consistent by using useAsyncData()/useFetch() in SSR-friendly ways and applying route rules for caching or ISR where appropriate.

Quick Start

Ask for a concrete SSR-safe plan for a Nuxt 4 page that fetches by route params (slug), and include which to use (useFetch vs useAsyncData), how to set a stable key, and how to apply routeRules plus lazy loading where it won’t hurt SEO.

Frequently Asked Questions about nuxt4-patterns

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

FAQPage Schema
Why does my Nuxt 4 page have hydration mismatches after server-side rendering?▼

Hydration mismatches in Nuxt 4 occur when server-rendered HTML differs from the client's first render. Using deterministic values, avoiding browser-only APIs during SSR, and applying stable data-fetching patterns with useFetch or useAsyncData prevents these mismatches.

How do I prevent redundant client-side requests when fetching data with route params in Nuxt 4?▼

To prevent redundant client-side requests in Nuxt 4, use await useFetch or useAsyncData with stable keys for initial page data loading. This ensures the server payload is reused during hydration instead of triggering duplicate fetches on the client.

What is the best way to configure routeRules for hybrid rendering and caching in Nuxt 4?▼

The best way to configure routeRules for hybrid rendering is to define rendering and caching strategies per route, enabling ISR or static generation where appropriate. This reduces payload size and improves interactivity without breaking SSR data expectations.

When should I use useFetch versus $fetch in a Nuxt 4 SSR application?▼

Use useFetch for SSR-safe initial page data loading to maintain payload consistency between server and client. Use $fetch for user-triggered actions, writes, or event handlers where server-side payload synchronization and hydration safety are not required.

Can I use lazy loading for below-the-fold components without hurting Nuxt 4 SEO?▼

Yes, you can apply lazy loading to below-the-fold components and data without hurting Nuxt 4 SEO. Keeping critical above-the-fold data in SSR-friendly useAsyncData calls ensures search engines see primary content while deferred loading improves interactivity.

How do I set a stable key for useAsyncData to avoid unpredictable refresh behavior in Nuxt 4?▼

To set a stable key for useAsyncData in Nuxt 4, provide a unique deterministic string tied to the route parameters or resource identifier. This enforces predictable refresh behavior and prevents hydration payload mismatches during server-side rendering.

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
statick88statick88
1

angular-performance

Optimize Angular performance with NgOptimizedImage, @defer blocks, and lazy-loaded routes.

Community
Intermediate
sumeetonline90sumeetonline90

nuxt4-patterns

Resolve Nuxt 4 hydration mismatches and optimize data fetching patterns.

Community
Intermediate
riftzen-bitriftzen-bit

nuxt4-patterns

Diagnose hydration mismatches and SSR errors in Nuxt 4 applications.

Community
Advanced