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

Developer Tools

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

About

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.

Key Features

0 GitHub stars
Type Adapter patterns to synchronize database schemas with frontend requirements
Guided 3-step conversion workflow for React Server Component migration
Strategies for isolating interactive UI sections from data-heavy server logic
Automated diagnosis of client-side fetching anti-patterns using pattern matching
Optimized handling for parallel fetching and streaming with Suspense

Use Cases

Refactoring legacy Next.js pages with slow 'loading spinner' initial states to instant SSR
Improving page SEO by ensuring data-driven content is included in the initial HTML payload
Eliminating performance-degrading data waterfalls caused by nested client-side hooks

About

Key Features

0 GitHub stars
Type Adapter patterns to synchronize database schemas with frontend requirements
Guided 3-step conversion workflow for React Server Component migration
Strategies for isolating interactive UI sections from data-heavy server logic
Automated diagnosis of client-side fetching anti-patterns using pattern matching
Optimized handling for parallel fetching and streaming with Suspense

Use Cases

Refactoring legacy Next.js pages with slow 'loading spinner' initial states to instant SSR
Improving page SEO by ensuring data-driven content is included in the initial HTML payload
Eliminating performance-degrading data waterfalls caused by nested client-side hooks