When should I use useFetch vs useAsyncData with this skill?

The skill recommends useFetch for simple API calls and useAsyncData for complex operations, multiple sources, or when custom keys are required for stable caching.

Does it support Nuxt 4 Nitro route rules?

Yes, it provides patterns for configuring prerender, SWR, ISR, and cache settings within nuxt.config.ts for optimal performance.

Can it help with large payload sizes in Nuxt applications?

Absolutely. It suggests using the 'pick' property and shallow payloads to trim the data forwarded from the server to the client payload.

How does this skill resolve Nuxt 4 hydration errors?

It identifies non-deterministic logic like Date.now() or browser-only APIs in SSR templates and suggests moving them to onMounted, ClientOnly, or using import.meta.client.

Nuxt 4 Patterns & Optimization

Name: Nuxt 4 Patterns & Optimization
Author: affaan-m

byaffaan-m

•

172,009

•

Herramientas de Diseño

Optimizes Nuxt 4 applications through specialized SSR patterns, hydration security, and efficient data fetching strategies.

Nuxt 4 Patterns is a comprehensive skill designed to help developers build robust, high-performance Nuxt 4 applications by enforcing best practices for Server-Side Rendering (SSR). It provides expert guidance on preventing hydration mismatches, optimizing data fetching with useFetch and useAsyncData, and configuring advanced routing rules like SWR and ISR. Whether you are debugging complex hydration issues or architecting a large-scale enterprise application, this skill ensures your Nuxt projects are efficient, SEO-friendly, and maintainable.

Características Principales

01Nitro Integration: Manages server-side caching, redirects, and API-specific route rules.

02SSR Hydration Security: Prevents mismatches between server-side HTML and client-side state.

03Advanced Routing Rules: Configures Nitro-level rendering strategies including SWR, ISR, and pre-rendering.

04Data Fetching Optimization: Implements SSR-safe patterns using useFetch and useAsyncData with payload trimming.

05172,009 GitHub stars

06Lazy Loading & Performance: Implements component code-splitting and delayed hydration strategies.

Casos de Uso

01Implementing efficient data fetching strategies that avoid double-fetching during client-side hydration.

02Configuring granular performance rules for marketing pages, product catalogs, and administrative dashboards.

03Debugging 'Hydration Mismatch' errors caused by non-deterministic rendering or browser-only APIs.

Características Principales

01Nitro Integration: Manages server-side caching, redirects, and API-specific route rules.

02SSR Hydration Security: Prevents mismatches between server-side HTML and client-side state.

03Advanced Routing Rules: Configures Nitro-level rendering strategies including SWR, ISR, and pre-rendering.

04Data Fetching Optimization: Implements SSR-safe patterns using useFetch and useAsyncData with payload trimming.

05172,009 GitHub stars

06Lazy Loading & Performance: Implements component code-splitting and delayed hydration strategies.

Casos de Uso

01Implementing efficient data fetching strategies that avoid double-fetching during client-side hydration.

02Configuring granular performance rules for marketing pages, product catalogs, and administrative dashboards.

03Debugging 'Hydration Mismatch' errors caused by non-deterministic rendering or browser-only APIs.