skills.rest
ethanranxu
ethanranxuCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React and Next.js performance rules to optimize rendering, data fetching, and bundling.

Updated Feb 14, 2026
Search Tags:#performance#react#next.js#best-practices#server-components#data-fetching#bundle-size
One-click install
npx skills add https://github.com/ethanranxu/NexusRan --skill vercel-react-best-practices-ethanranxu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/ethanranxu/NexusRan/tree/main/.cursor/skills/vercel-react-best-practices
Command: npx skills add https://github.com/ethanranxu/NexusRan --skill vercel-react-best-practices-ethanranxu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vercel React Best Practices provide structured, actionable guidelines to help teams deliver fast, scalable React and Next.js applications by optimizing rendering, data fetching, and bundle size.

Core Features & Use Cases

  • 45 rules across 8 categories covering Eliminating Waterfalls, Bundle Size, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
  • Use cases include building high-performance components, optimizing Next.js server components, reducing TTFB, and minimizing hydration costs across RSC boundaries.
  • It serves as a reference for engineers to review, refactor, and automate performance improvements in React/Next.js projects.

Quick Start

Start by auditing a React/Next.js codebase against the prioritized rule categories, implement the top-impact patterns (e.g., defer awaits, parallelize data fetching, dynamic imports, and server boundary optimizations), and iterate based on measured performance gains.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React and Next.js performance for server components and data fetching?▼

Optimize React and Next.js performance by applying 45 actionable rules across 8 categories, targeting waterfalls, bundle size, and server-side rendering to reduce TTFB and hydration costs.

What is the best way to reduce bundle size in a Next.js application?▼

Reduce bundle size by implementing dynamic imports and optimizing server boundaries across React server components, following categorized best practices to minimize client-side hydration costs.

How does eliminating waterfalls improve Next.js server component rendering?▼

Eliminating waterfalls improves server component rendering by parallelizing data fetching and deferring awaits, directly reducing TTFB and enhancing overall server-side performance.

Can I use these React performance best practices for refactoring existing client components?▼

Yes, you can use these React performance best practices to refactor existing client components by applying re-render optimization rules and advanced patterns to improve rendering performance.

When should I optimize server boundaries to reduce hydration costs in React?▼

Optimize server boundaries to reduce hydration costs when building high-performance Next.js applications, specifically targeting React server components and client component interactions to lower bundle size.

Related Skills

Explore More Software Engineering Skills→
sgcarstrendssgcarstrends
21

performance-opt

Identify and fix web performance bottlenecks across Next.js and React stacks.

Official
Advanced
nicholasgriffintnnicholasgriffintn
2

vercel-react-best-practices

Apply Vercel best practices to optimize React and Next.js performance.

Community
Advanced
Trio-Blockchain-LabsTrio-Blockchain-Labs

vercel-react-best-practices

Apply React and Next.js performance best practices across component design, data fetching, and code reviews.

Official
Advanced
fanguyunfanguyun

vercel-react-best-practices

Optimize React and Next.js applications with performance guidelines for bundle size and rendering.

Community
Advanced