When should I keep client-side fetching instead of using this optimizer?

You should keep client-side fetching for real-time subscriptions, user-triggered events like live searches, or when data depends on client-only state like localStorage or specific browser auth tokens.

Can it help find slow components in large codebases?

Absolutely. It uses diagnostic commands like ripgrep to scan your app directory for 'use client' directives and useEffect patterns that typically indicate inefficient fetching strategies.

Does the skill help with TypeScript type mismatches?

Yes, it includes a Type Adapter pattern specifically designed to bridge the gap between database types and frontend interface requirements during the server-side transition.

How does this skill improve my application's SEO?

By converting client-side fetching to Server Components (RSC), the content is rendered on the server and included in the initial HTML, allowing search engines to index your content without executing JavaScript.

Next.js RSC Data Optimizer

Name: Next.js RSC Data Optimizer
Author: januarfonti

byjanuarfonti

0•

開発者ツール

Optimizes Next.js performance by converting slow client-side data fetching to efficient React Server Components (RSC).

The rsc-data-optimizer skill provides a structured framework for refactoring Next.js App Router applications to maximize performance and SEO. It helps developers identify 'red flag' anti-patterns like loading spinners and useEffect waterfalls, providing a 3-step workflow to migrate data fetching from the client to the server. By isolating interactive logic into targeted Client Components while handling data loading via Server Components, it ensures instant initial page loads and better search engine visibility.

主な機能

010 GitHub stars

02Type Adapter patterns to synchronize database schemas with frontend requirements

03Guided 3-step conversion workflow for React Server Component migration

04Strategies for isolating interactive UI sections from data-heavy server logic

05Automated diagnosis of client-side fetching anti-patterns using pattern matching

06Optimized handling for parallel fetching and streaming with Suspense

ユースケース

01Refactoring legacy Next.js pages with slow 'loading spinner' initial states to instant SSR

02Improving page SEO by ensuring data-driven content is included in the initial HTML payload

03Eliminating performance-degrading data waterfalls caused by nested client-side hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add januarfonti/opencode-template-configured rsc-data-optimizer

For use in Claude.ai and ChatGPT

Download Skill