React and Next.js Data and Rendering Patterns
Get React and Next.js code with correct server/client boundaries, explicit caching, and fewer data-fetching waterfalls.
Before & after
Same prompt, same agent — the only difference is the skill.
I can help make sure your React code is following good practices. Generally, you'll want to use functional components with hooks, handle state management cleanly, and keep components focused on one responsibility. Make sure you're not doing too much data fetching in the browser—server components can help with that. You should probably review your component structure and make sure you're not passing props too deeply through the tree. Consider using environment variables for configuration and keeping your build output small. It's also good to check that your testing coverage is reasonable. Would you like me to review a specific component, or would you prefer general guidance on architecture?
VERCEL REACT BEST PRACTICES APPLIED DATA FETCHING • Server components (default) for data queries • Client components marked with "use client" only when needed (interactivity) • Streaming with Suspense for progressive page loads • Avoid fetching client-side if data can be fetched server-first COMPONENT PATTERNS • Functional components with React hooks (no class components) • Props passed through context API or composition for deep trees • Proper key usage in lists • Dynamic imports for code-splitting PERFORMANCE • Image optimization via Image component • Font loading via next/font (avoids layout shift) • Script optimization via next/script tag • Lazy loading for below-fold content STATE MANAGEMENT • useState for local component state • Server state in database, not browser • App Router (not Pages Router) OUTPUT Your generated code follows these patterns automatically. Deprecated patterns replaced with current equivalents.
About this skill
Your page fetches everything after mount, adding one button turns the whole screen into client code, and a cache fix leaves yesterday's data on screen. This skill helps Claude generate and repair React and Next.js code by tracing where data loads, where code executes, and what makes rendered results stale.
What it does
- Applies App Router, Pages Router, or client-only React conventions to the actual project.
- Keeps server data access separate from the smallest necessary interactive components.
- Removes avoidable request waterfalls and places loading boundaries around independently useful content.
- Chooses explicit caching and invalidation behavior based on privacy and freshness requirements.
- Reviews effects, hydration, bundles, and mutations for concrete correctness and performance problems.
- Produces focused patches with verification steps and clearly marked version assumptions.
What you get
Working code or an actionable review sized to your request, with the rendering and data decisions explained. Unknown framework behavior is flagged instead of presented as a current official recommendation.
Best for
Developers generating or reviewing React and Next.js components, especially teams dealing with App Router adoption, stale data, slow initial loads, or oversized client boundaries.
SKILL.md preview
---
name: react-and-nextjs-data-and-rendering-patterns
description: Generate and review React and Next.js code by checking router conventions, tracing server/client boundaries, scheduling data dependencies, and making caching and invalidation explicit. Use when the user says "build this Next.js page", "review this React component", "my page fetches everything twice", "my data stays stale after saving", "should this use use client?", "this page loads too slowly", or "move this useEffect fetch to the server".
---
# React and Next.js Data and Rendering Patterns
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.