Does it support complex database type mapping?

Yes, the skill includes a Type Adapter pattern specifically designed to bridge the gap between backend database types and frontend interface requirements.

How does this skill detect slow data fetching patterns?

It uses specialized search commands to find 'use client' directives paired with useEffect hooks and useState loading indicators that signify client-side fetching bottlenecks.

When should I keep fetching data on the client side?

Client-side fetching should be maintained for real-time subscriptions, user-triggered events like search filters, and data that relies on browser-only state like localStorage.

Will this skill break my interactive UI components?

No, it follows a 3-step conversion workflow that extracts interactive elements into separate Client Components while moving the data fetching logic to the Server Component.

RSC Data Fetching Optimizer

Name: RSC Data Fetching Optimizer
Author: julianromli

byjulianromli

•

101

•

Developer Tools

Optimizes Next.js App Router performance by converting slow client-side data fetching into fast React Server Components.

The RSC Data Fetching Optimizer is designed to help developers modernize their Next.js applications by migrating from client-side fetching patterns to React Server Components (RSC). It identifies common performance bottlenecks like loading spinners and waterfall fetches caused by useEffect and useState hooks, providing a structured workflow to refactor code into server-side logic. By moving data fetching to the server, this skill helps reduce bundle sizes, improves initial page load times, and enhances SEO by ensuring content is present in the initial HTML response.

Key Features

01Identifies client-side fetching anti-patterns using automated codebase scanning

02Optimizes data waterfalls by enabling parallel server-side fetching

03Implements the Type Adapter pattern to synchronize database and frontend schemas

04Converts Next.js pages to async Server Components for instant data availability

05101 GitHub stars

06Streamlines the refactoring of interactive components into isolated Client Components

Use Cases

01Migrating legacy Next.js client-side pages to the modern App Router architecture

02Improving search engine visibility for data-heavy pages by utilizing Server-Side Rendering

03Eliminating slow initial page loads and cumulative layout shifts caused by loading spinners

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add julianromli/opencode-template rsc-data-optimizer

For use in Claude.ai and ChatGPT

Download Skill