skills.rest
cescrafli
cescrafliCOMMUNITY
Explore all skills by this author →
GitHub

nuxt4-patterns

Implements SSR-safe data fetching and route strategies for Nuxt 4 applications.

Updated Mar 26, 2026
Search Tags:#performance#routing#ssr#hydration#nuxt#data-fetching#nuxt4
One-click install
npx skills add https://github.com/cescrafli/compyrasion --skill nuxt4-patterns-cescrafli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt4-patterns
Source: https://github.com/cescrafli/compyrasion/tree/main/skills/nuxt4-patterns
Command: npx skills add https://github.com/cescrafli/compyrasion --skill nuxt4-patterns-cescrafli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Nuxt 4 apps often face hydration mismatches and suboptimal data fetching, especially with SSR, hybrid rendering, and route-driven content.

Core Features & Use Cases

  • Hydration safety guidelines: deterministic first render, client-only logic, and proper usage of onMounted and ClientOnly.
  • Data fetching patterns: useFetch, useAsyncData, and $fetch with SSR-safe usage and stable keys.
  • Route rules and lazy loading: configure routeRules in nuxt.config.ts for caching, prerender, isr, and ssr toggles; implement lazy hydration and code-splitting.

Quick Start

Use this skill to implement hydration-safe data fetching and route strategies in a Nuxt 4 project.

Frequently Asked Questions about nuxt4-patterns

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

FAQPage Schema
Why do hydration mismatches occur in Nuxt 4 SSR and how do I prevent them?▼

Prevent Nuxt 4 hydration mismatches by ensuring deterministic first renders, isolating client-only logic in onMounted, and using ClientOnly to avoid server-client rendering differences during SSR.

How do I configure route rules for hybrid rendering and caching in nuxt.config.ts?▼

Configure route rules in nuxt.config.ts to define hybrid rendering behavior by setting caching, prerender, isr, and ssr toggles for specific routes to optimize performance and rendering strategies.

What is the best way to use useFetch and useAsyncData for SSR-safe data fetching in Nuxt 4?▼

The best way to ensure SSR-safe data fetching with useFetch and useAsyncData is using stable keys and deterministic patterns to guarantee consistent server-side rendering output and avoid hydration issues.

How do I implement lazy hydration and code splitting for Nuxt 4 route components?▼

Implement lazy hydration and code splitting in Nuxt 4 by applying lazy loading strategies and configuring route rules, ensuring components load efficiently without disrupting server-side rendering output.

Can I use $fetch directly for page-level data fetching in Nuxt 4 SSR applications?▼

Yes, you can use $fetch for page-level data fetching in Nuxt 4, but use it with SSR-safe patterns and stable keys alongside useFetch and useAsyncData to maintain deterministic output.

Related Skills

Explore More Software Engineering Skills→
ChrisTowlesChrisTowles
4

nuxt-v4

Implement Nuxt 4 SSR patterns with composables, server routes, and Cloudflare deployment.

Community
Advanced
oriysoriys

optimize

Identify and fix web interface performance bottlenecks using Core Web Vitals metrics.

Community
Advanced
yigitkonuryigitkonur
11

convert-vue-nextjs

Convert Vue 2/3 or Nuxt components to Next.js App Router with React.

Community
Advanced
arbisoftarbisoft
4

nuxt4-patterns

Resolve hydration mismatches and SSR inconsistencies in Nuxt 4 applications.

Official
Intermediate