skills.rest
teocrafters
teocraftersOFFICIAL
Explore all skills by this author →
GitHub

ssr-data-fetching

Implement SSR-compatible data fetching in Nuxt 4 with useFetch or useAsyncData.

Updated Aug 29, 2025
Search Tags:#ssr#hydration#nuxt#data-fetching#server-rendering#useFetch#useAsyncData
One-click install
npx skills add https://github.com/teocrafters/public-talk-planner --skill ssr-data-fetching
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ssr-data-fetching
Source: https://github.com/teocrafters/public-talk-planner/tree/main/.claude/skills/ssr-data-fetching
Command: npx skills add https://github.com/teocrafters/public-talk-planner --skill ssr-data-fetching

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps developers implement Server-Side Rendering compatible data fetching in Nuxt 4, ensuring API data is available during the initial render and improving SEO and performance.

Core Features & Use Cases

  • Use useFetch() for straightforward data fetching in components and pages.
  • Use useAsyncData() for more complex or shared data requirements across routes.
  • Ensure loading and error states are properly handled to maintain good UX and reliability.
  • Prevent client-only fetches to avoid missing data during SSR hydration and reduce re-renders.

Quick Start

Fetch data in a Nuxt 4 component using useFetch or useAsyncData and ensure SSR hydration by awaiting results.

Frequently Asked Questions about ssr-data-fetching

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

FAQPage Schema
How do I fetch API data during server-side rendering in Nuxt 4?▼

To fetch API data during server-side rendering in Nuxt 4, use the useFetch() or useAsyncData() composables within your Vue components and always await the results to ensure data is available before hydration.

Why does my Nuxt 4 component lose data during SSR hydration?▼

Nuxt 4 components lose data during SSR hydration when using client-only fetches. Prevent this by implementing SSR-compatible data fetching patterns with useFetch() or useAsyncData() and awaiting the results to avoid re-renders.

When should I use useFetch vs useAsyncData for server rendering in Nuxt?▼

Use useFetch() for straightforward data fetching in pages and components, while useAsyncData() is better for complex data requirements or shared logic across dynamic routes during server rendering.

How do I handle loading and error states with useFetch in Nuxt 4?▼

Handle loading and error states in Nuxt 4 by implementing proper error handling logic alongside your useFetch() or useAsyncData() calls to maintain good UX and reliability during server-side rendering.

Can I use dynamic routes with useAsyncData for SSR data fetching?▼

Yes, you can use useAsyncData() with dynamic routes in Nuxt 4 to handle API calls and data-driven UI. Apply these SSR-compatible patterns in your page components and await the results for proper hydration.

What is the best way to prevent client-only fetches in Nuxt 4 server rendering?▼

The best way to prevent client-only fetches in Nuxt 4 is to apply SSR-compatible data fetching patterns using useFetch() or useAsyncData(), ensuring data is available during the initial server render.

Related Skills

Explore More Software Engineering Skills→
ROYCE-8425ROYCE-8425
1

nuxt4-patterns

Configures Nuxt 4 hydration safety, SSR data fetching, and route rules.

Community
Advanced
jandragsbaekjandragsbaek
1

seo-audit

Identify SEO issues and output a prioritized remediation plan.

Community
Advanced
tankpkgtankpkg
1

@tank/vue-nuxt

Standardize Vue 3 and Nuxt 3 production application patterns.

Official
Advanced
simoabidsimoabid
1

nextjs-best-practices

Guide Next.js App Router development with component, data fetching, and routing best practices.

Community
Intermediate