Does it cover data fetching best practices?

Absolutely. It defines the correct usage of useFetch, useAsyncData, and $fetch to prevent double-fetching and optimize payload sizes for faster page loads.

What performance techniques are included?

It includes guidance on lazy loading components with the 'Lazy' prefix, implementing lazy hydration strategies, and utilizing NuxtLink for efficient prefetching.

Can it help with SEO optimization?

Yes, it guides the use of SSR-safe data fetching and Nitro route rules like SWR and ISR to ensure search engines can index content effectively.

How does this skill help with Nuxt 4 hydration errors?

It provides specific patterns for deterministic rendering and helps move browser-only logic into appropriate lifecycle hooks like onMounted or client-only components.

Nuxt 4 Development Patterns

Name: Nuxt 4 Development Patterns
Author: JantonioFC

byJantonioFC

•

API 开发

Standardizes Nuxt 4 application development with proven patterns for hydration safety, performance optimization, and SSR data fetching.

This skill equips Claude with specialized knowledge for building and debugging Nuxt 4 applications, specifically focusing on the transition between server-side rendering and client-side hydration. It provides implementation guidance for SSR-safe data fetching using useFetch and useAsyncData, helps configure Nitro route rules for hybrid rendering (SWR, ISR, Prerender), and offers strategies for performance optimization through lazy loading and lazy hydration. By following these domain-specific best practices, developers can ensure their Nuxt applications are SEO-friendly, performant, and free from common hydration mismatches.

主要功能

01Hydration mismatch prevention and debugging tools

02Nitro route rules configuration for SWR, ISR, and Prerendering

03SSR-safe data fetching patterns using useFetch and useAsyncData

042 GitHub stars

05Performance optimization via lazy loading and lazy hydration

06Payload size reduction and state management best practices

使用场景

01Implementing complex data fetching strategies for SEO-critical pages

02Optimizing Core Web Vitals through code splitting and lazy component loading

03Debugging hydration errors between server HTML and client state

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank nuxt4-patterns

For use in Claude.ai and ChatGPT

主要功能

01Hydration mismatch prevention and debugging tools

02Nitro route rules configuration for SWR, ISR, and Prerendering

03SSR-safe data fetching patterns using useFetch and useAsyncData

042 GitHub stars

05Performance optimization via lazy loading and lazy hydration

06Payload size reduction and state management best practices

使用场景

01Implementing complex data fetching strategies for SEO-critical pages

02Optimizing Core Web Vitals through code splitting and lazy component loading

03Debugging hydration errors between server HTML and client state

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank nuxt4-patterns

For use in Claude.ai and ChatGPT