# Handling Data Fetching

> Strategy for fetching data using React Server Components (RSC) and managing cache. Use for initial page loads and SEO-optimized data.

- Skill: `majiayu000/handling-data-fetching` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/handling-data-fetching`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/handling-data-fetching/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/handling-data-fetching

---


# Data Fetching and Caching

## When to use this skill
- When building pages that need SEO (Tours, Details).
- When deciding between RSC and Client-side `useEffect`.

## Strategy
- **RSC (Default)**: Fetch data in Server Components for speed and SEO.
- **Client Fetching**: Use only for highly interactive, private, or real-time data.
- **No-store**: Use `cache: 'no-store'` or `dynamic = 'force-dynamic'` for frequently changing data (like live availability).

## Implementation (RSC)
```typescript
import { TourService } from '@/services/tours';

export default async function ToursPage() {
    const tours = await TourService.getAll();
    
    return (
        <div>
            {tours.documents.map(tour => <TourCard key={tour.$id} tour={tour} />)}
        </div>
    );
}
```

## Instructions
- **Type Safety**: Await findings and pass typed objects to child components.
- **Suspense**: Always wrap RSC data-fetching segments in `Suspense` for better UX.