skills.rest
riftzen-bit
riftzen-bitCOMMUNITY
Explore all skills by this author →
GitHub

nuxt4-patterns

Diagnose hydration mismatches and SSR errors in Nuxt 4 applications.

1|Updated Apr 7, 2026
Search Tags:#ssr#hydration#nuxt#nuxt4#route-rules#usefetch#useasyncdata
One-click install
npx skills add https://github.com/riftzen-bit/gemini-setup --skill nuxt4-patterns-riftzen-bit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt4-patterns
Source: https://github.com/riftzen-bit/gemini-setup/tree/main/skills/nuxt4-patterns
Command: npx skills add https://github.com/riftzen-bit/gemini-setup --skill nuxt4-patterns-riftzen-bit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents hydration mismatches, SSR/client rendering differences, and route-level caching or rendering errors that break user experience and SEO in Nuxt 4 applications.

Core Features & Use Cases

  • Hydration Safety Guidance: Keep the first render deterministic, move browser-only logic to mounted hooks or client-only components, and avoid client-only values in SSR-rendered markup.
  • Data Fetching Patterns: Recommend when to use useFetch versus useAsyncData, how to give stable keys, when to use lazy fetching or server:false, and strategies to trim payload size.
  • Route and Performance Strategies: Advise routeRules for prerender, SWR, ISR, and client-only pages, and provide lazy loading and lazy hydration techniques for large interactive islands.
  • Review Checklist: Validate first SSR vs hydrated markup parity, ensure page data is hydrated from server-safe fetches, verify non-critical data is lazy with loading UI, and match routeRules to SEO and freshness requirements.

Quick Start

Use the nuxt4-patterns skill to diagnose hydration mismatches and recommend concrete fixes for a Nuxt 4 page that uses useFetch and dynamic route parameters.

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 Nuxt 4 SSR applications?▼

Fix Nuxt 4 hydration mismatches by ensuring deterministic first renders, moving browser-only logic to mounted hooks or client-only components, and avoiding client-only values in server-rendered markup.

When should I use useFetch versus useAsyncData for Nuxt 4 data fetching?▼

Use useFetch versus useAsyncData based on your payload and data handling needs, ensuring stable keys, leveraging lazy fetching, and applying server:false strategies to trim payload size and predict SSR behavior.

How do I configure routeRules for prerender, SWR, and ISR in Nuxt 4?▼

Configure Nuxt 4 routeRules to apply prerender, SWR, and ISR strategies, matching route rendering rules to SEO and data freshness requirements while isolating client-only pages to prevent rendering errors.

What is the best way to lazy load large interactive islands in Nuxt 4?▼

Lazy load large interactive islands in Nuxt 4 by applying lazy hydration techniques and lazy data fetching practices, ensuring non-critical data loads asynchronously with proper loading UI to reduce payloads.

Why does my Nuxt 4 page break when using dynamic route parameters with useFetch?▼

Nuxt 4 pages break with dynamic route parameters and useFetch due to unstable keys or non-deterministic rendering, requiring stable fetch keys and server-safe hydration parity to prevent SSR errors.

Do I need to isolate browser-only logic for Nuxt 4 server-side rendering?▼

You must isolate browser-only logic for Nuxt 4 server-side rendering by moving it to mounted hooks or client-only components, ensuring the first server render stays deterministic and mismatch-free.

Related Skills

Explore More Software Engineering Skills→
klu-devklu-dev
2

nuxt4-patterns

Optimize Nuxt 4 SSR data fetching with useFetch and useAsyncData.

Community
Intermediate
samymitysamymity
1

nuxt4-patterns

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

Community
Intermediate
xxihxxih
1

nuxt4-patterns

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

Community
Intermediate
richardnpaulrichardnpaul

nuxt4-patterns

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

Community
Intermediate