rsc-data-optimizer_skill

Overview

This skill optimizes Next.js App Router data fetching by converting slow client-side fetches into fast server-side fetches using React Server Components (RSC). It eliminates initial-loading spinners, reduces waterfall requests, and improves SEO by ensuring critical content is rendered in initial HTML. The workflow separates interactive UI into small client components while performing data retrieval on the server.

How this skill works

The tool scans the codebase for common anti-patterns like "use client" combined with useEffect-based fetching, isLoading state flags, and store/context-driven initial data loading. It guides converting pages into Server Components that call server-side data functions and passing the results to dedicated client components for interactivity. It also recommends type adapter patterns to map backend types to frontend shapes and advises when to preserve client-side behavior.

When to use it

• Initial page shows loading spinners or blank content before data arrives
• Pages use useEffect + useState for initial data fetching
• Context or store patterns cause sequential waterfall fetches
• Content is missing from initial HTML and SEO needs improvement
• Converting pages marked with "use client" to server-rendered components

Best practices

• Identify required initial-render data and fetch it server-side in the page component
• Extract only interactive pieces (hooks, event handlers, animations) into small "use client" components that accept server-fetched props
• Use a type adapter to convert DB/backend types to frontend shapes before rendering
• Keep client components for real-time, auth-dependent, or user-triggered fetches (search, filters, infinite scroll)
• Prefer parallel server fetches and caching strategies to minimize latency

Example use cases

• Convert a product listing page that currently fetches in useEffect to server-side fetch for instant HTML and SEO
• Remove a site-wide loading spinner by moving initial session/user data fetch to the server
• Split a dashboard into a server-rendered data snapshot and small client widgets for filters and real-time updates
• Replace store-driven initial loads that cause sequential requests with a single server fetch and prop drilling to client widgets