Claude-skill-registry handling-data-fetching

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

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/handling-data-fetching" ~/.claude/skills/majiayu000-claude-skill-registry-handling-data-fetching && rm -rf "$T"

manifest: skills/data/handling-data-fetching/SKILL.md

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)

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.