Loading...
Loading...
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"
npx skill4agent add julianromli/ai-skills rsc-data-optimizer# Find client-side fetching patterns
rg -n "useEffect.*fetch|useState.*loading|useStore\(\)" --type tsx
rg -n '"use client"' app/ --type tsx"use client"useEffectfetch()useState(true)isLoadinguseStore()useContextuseInViewuseStateonClick// 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>;
}// 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} />;
}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} />;
}"use client"