rsc-data-optimizer

Optimize Next.js App Router data fetching by converting slow client-side fetching to fast server-side fetching using React Server Components (RSC). Use when: - User reports slow initial page load with loading spinners - Page uses useEffect + useState for data fetching - StoreContext/useStore pattern causes waterfall fetching - Need to improve SEO (content not in initial HTML) - Converting "use client" pages to Server Components Triggers: "slow loading", "optimize fetching", "SSR data", "RSC optimization", "remove loading spinner", "server-side fetch", "convert to server component", "data fetch lambat", "loading lama"

153 stars

byMicrock

View on GitHub Installation ↓

Best use case

rsc-data-optimizer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using rsc-data-optimizer should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/rsc-data-optimizer/SKILL.md --create-dirs "https://raw.githubusercontent.com/Microck/ordinary-claude-skills/main/skills_all/rsc-data-optimizer/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/rsc-data-optimizer/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How rsc-data-optimizer Compares

Feature / Agent	rsc-data-optimizer	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# RSC Data Fetching Optimizer

Optimize slow client-side data fetching to instant server-side rendering.

## Quick Diagnosis

Search for these anti-patterns in the codebase:

```bash
# Find client-side fetching patterns
rg -n "useEffect.*fetch|useState.*loading|useStore\(\)" --type tsx
rg -n '"use client"' app/ --type tsx
```

**Red flags:**
- `"use client"` + `useEffect` + `fetch()` = slow initial load
- `useState(true)` for `isLoading` = user sees spinner
- `useStore()` or `useContext` for initial page data = waterfall fetching

## 3-Step Conversion Workflow

### Step 1: Identify Data Requirements

Determine what data the page needs on initial render:
- Static/rarely-changing data → **Server Component** (SSR)
- User-interactive data (filters, search) → **Client Component**

### Step 2: Extract Interactive Sections

Move sections with `useInView`, `useState`, `onClick` to separate Client Components:

```tsx
// components/data-section.tsx
"use client";

interface DataSectionProps {
  data: Item[];  // Receive data as props
}

export function DataSection({ data }: DataSectionProps) {
  const [ref, inView] = useInView();  // Client-side animation OK
  return <div ref={ref}>...</div>;
}
```

### Step 3: Convert Page to Server Component

```tsx
// app/page.tsx - NO "use client"
import { getData } from "@/lib/actions/data";
import { DataSection } from "@/components/data-section";

export default async function Page() {
  const data = await getData();  // Fetch on server
  return <DataSection data={data} />;
}
```

## Type Adapter Pattern

When DB types differ from frontend types:

```tsx
import type { Item as DBItem } from "@/lib/database.types";
import type { Item } from "@/lib/types";

function adaptDBToFrontend(db: DBItem): Item {
  return {
    id: db.id,
    name: db.name,
    description: db.description ?? "",
    createdAt: new Date(db.created_at),
  };
}

export default async function Page() {
  const dbItems = await getItems();
  const items = dbItems.map(adaptDBToFrontend);
  return <ItemList items={items} />;
}
```

## When to Keep Client-Side

Keep `"use client"` when:
- Real-time subscriptions (Supabase realtime)
- User-triggered fetching (search, filters, pagination)
- Data depends on client state (auth token, localStorage)
- Infinite scroll / load more patterns

## Advanced Patterns

See [references/patterns.md](references/patterns.md) for:
- Parallel data fetching
- Streaming with Suspense
- Error boundaries
- Caching strategies
- Hybrid SSR + client patterns

Related Skills

Validate with Database

153

from Microck/ordinary-claude-skills

Connect to live PostgreSQL database to validate schema assumptions, compare pg_dump vs pgschema output, and query system catalogs interactively

relational-database-mcp-cloudbase

153

from Microck/ordinary-claude-skills

This is the required documentation for agents operating on the CloudBase Relational Database. It lists the only four supported tools for running SQL and managing security rules. Read the full content to understand why you must NOT use standard Application SDKs and how to safely execute INSERT, UPDATE, or DELETE operations without corrupting production data.

moai-domain-database

153

from Microck/ordinary-claude-skills

Database specialist covering PostgreSQL, MongoDB, Redis, and advanced data patterns for modern applications

databases

153

from Microck/ordinary-claude-skills

Work with MongoDB (document database, BSON documents, aggregation pipelines, Atlas cloud) and PostgreSQL (relational database, SQL queries, psql CLI, pgAdmin). Use when designing database schemas, writing queries and aggregations, optimizing indexes for performance, performing database migrations, configuring replication and sharding, implementing backup and restore strategies, managing database users and permissions, analyzing query performance, or administering production databases.

database-testing

153

from Microck/ordinary-claude-skills

Database schema validation, data integrity testing, migration testing, transaction isolation, and query performance. Use when testing data persistence, ensuring referential integrity, or validating database migrations.

database-migration

153

from Microck/ordinary-claude-skills

Execute database migrations across ORMs and platforms with zero-downtime strategies, data transformation, and rollback procedures. Use when migrating databases, changing schemas, performing data transformations, or implementing zero-downtime deployment strategies.

Database Implementation

153

from Microck/ordinary-claude-skills

Database schema design, migrations, query optimization with SQL, Exposed ORM, Flyway. Use for database, migration, schema, sql, flyway tags. Provides migration patterns, validation commands, rollback strategies.

data-viz-plots

153

from Microck/ordinary-claude-skills

Create publication-quality plots and visualizations using matplotlib and seaborn. Works with ANY LLM provider (GPT, Gemini, Claude, etc.).

data-transform

153

from Microck/ordinary-claude-skills

Transform, clean, reshape, and preprocess data using pandas and numpy. Works with ANY LLM provider (GPT, Gemini, Claude, etc.).

data-sourcing

153

from Microck/ordinary-claude-skills

Optimize provider selection, routing, and credit usage across 150+ enrichment sources for company/contact intelligence.

data-model-creation

153

from Microck/ordinary-claude-skills

Optional advanced tool for complex data modeling. For simple table creation, use relational-database-tool directly with SQL statements.

data-migration

153

from Microck/ordinary-claude-skills

Plan and execute database migrations, data transformations, and system migrations safely with rollback strategies and data integrity validation. Use when migrating databases, transforming data schemas, moving between database systems, implementing versioned migrations, handling data transformations, ensuring data integrity, or planning zero-downtime migrations.