# Frontend Data Fetching Strategy

> Standardized guidelines and patterns for Frontend Data Fetching Strategy.

- Skill: `valec3/frontend-data-fetching-strategy` (Agent Skill)
- Install (CLI): `npx skillmds add valec3/frontend-data-fetching-strategy`
- Raw SKILL.md: https://api.skillmd.com/api/skills/valec3/frontend-data-fetching-strategy/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: valec3 (https://skillmd.com/u/valec3)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/valec3/frontend-data-fetching-strategy

---


# Frontend Data Fetching Strategy

## When to use this skill
- Choosing data fetching approach
- Optimizing data loading
- Improving perceived performance

## Workflow
- [ ] Choose CSR vs SSR vs SSG
- [ ] Implement data fetching pattern
- [ ] Add loading states
- [ ] Handle errors
- [ ] Optimize with caching

## Instructions

### Strategies

**Client-Side Rendering (CSR)**
```typescript
function Users() {
  const { data } = useQuery('users', fetchUsers);
  return <UserList users={data} />;
}
```

**Server-Side Rendering (SSR)**
```typescript
// Next.js
export async function getServerSideProps() {
  const users = await fetchUsers();
  return { props: { users } };
}

export default function Page({ users }) {
  return <UserList users={users} />;
}
```

**Static Site Generation (SSG)**
```typescript
// Next.js
export async function getStaticProps() {
  const users = await fetchUsers();
  return { props: { users }, revalidate: 60 };
}
```

## Resources
- CSR: Dynamic data, authenticated
- SSR: SEO, real-time data
- SSG: Static content, best performance