# Remix Loaders

> Remix Data Loading

- Skill: `comeonoliver/remix-loaders` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/remix-loaders`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/remix-loaders/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/comeonoliver/remix-loaders

---

# Remix Data Loading

## Loader (GET)
```typescript
export async function loader({ params, request }: LoaderFunctionArgs) {
    const url = new URL(request.url);
    const page = Number(url.searchParams.get('page') || 1);
    const posts = await db.post.findMany({ skip: (page - 1) * 10, take: 10 });
    return json({ posts, page });
}
```

## Action (POST/PUT/DELETE)
```typescript
export async function action({ request }: ActionFunctionArgs) {
    const form = await request.formData();
    const intent = form.get('intent');
    if (intent === 'delete') {
        await db.post.delete({ where: { id: form.get('id') } });
    } else {
        await db.post.create({ data: { title: form.get('title') } });
    }
    return redirect('/posts');
}
```

## Streaming & Deferred
```typescript
export async function loader() {
    return defer({ fast: await getFast(), slow: getSlow() }); // slow loads async
}
```