skills.rest
adryanev
adryanevCOMMUNITY
Explore all skills by this author →
Website𝕏@adryan_evGitHub

vercel-react-best-practices

Analyze React/Next.js projects for performance issues and apply best practices.

2|Updated May 2, 2025
Search Tags:#performance#refactoring#react#optimization#nextjs#best-practices
One-click install
npx skills add https://github.com/adryanev/.dotfiles --skill vercel-react-best-practices-adryanev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/adryanev/.dotfiles/tree/main/.agents/skills/react-best-practices
Command: npx skills add https://github.com/adryanev/.dotfiles --skill vercel-react-best-practices-adryanev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions due to waterfalls, large bundles, and mismatched SSR/CSR rendering. This guide collects practical, production-grade patterns to prevent those issues and accelerate user-facing performance.

Core Features & Use Cases

  • Eliminates waterfalls and reduces bundle size with advised data fetching, preloading, and code-splitting techniques.
  • Guides server/client data access, caching, and parallelization strategies across Next.js routes, API routes, and components.
  • Provides concrete examples and patterns for React, Next.js pages, Server Actions, and RSC boundaries to improve Time to Interactive and First Contentful Paint.

Quick Start

Analyze a React/Next.js project and apply the documented best practices to improve performance.

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 fix React and Next.js performance issues like render waterfalls and large bundles?▼

Fix React and Next.js performance issues by applying categorized, production-grade rule sets for data fetching, preloading, and code-splitting to eliminate waterfalls and reduce bundle size. This improves Time to Interactive and First Contentful Paint.

What are the best practices for server and client data fetching in Next.js to improve load times?▼

Best practices for server and client data fetching in Next.js involve using parallelization strategies, proper caching, and advised data access techniques across routes and components to prevent waterfalls and improve load times.

How do I optimize React Server Components and Server Actions for better UX?▼

Optimize React Server Components and Server Actions by applying concrete patterns for RSC boundaries to improve user-facing performance. These patterns guide server-client rendering boundaries to accelerate First Contentful Paint.

Can I use these React performance patterns to refactor an existing Next.js codebase?▼

You can apply these React performance patterns to refactor an existing Next.js codebase. The comprehensive rule set with priority levels and examples specifically guides automated refactoring and code generation for frontend components and pages.

Why does my Next.js application suffer from mismatched SSR and CSR rendering performance?▼

Next.js applications suffer from mismatched SSR and CSR rendering performance due to unoptimized server-client boundaries and waterfalls. Applying targeted data fetching, caching, and parallelization strategies across routes resolves these regressions.

Related Skills

Explore More Software Engineering Skills→
Itinerant18Itinerant18

senior-frontend

Automate React and Next.js component scaffolding, bundle analysis, and project setup.

Community
Advanced
wixelswixels

vercel-react-best-practices

Apply 70+ prioritized performance rules to React and Next.js code.

Official
Advanced
nikolovlazarnikolovlazar
321

react-best-practices

Apply React and Next.js performance patterns to components and pages.

Community
Advanced
ihj04982ihj04982

defer-non-critical-third-party-libraries

Defer non-critical third-party libraries with dynamic imports in Next.js.

Community
Basic