skills.rest
CAPJackie
CAPJackieCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply Vercel Engineering rules to optimize React and Next.js performance.

Updated Aug 8, 2024
Search Tags:#react#bundle size#next.js#performance optimization#server-side rendering#async parallelization#re-render reduction
One-click install
npx skills add https://github.com/CAPJackie/x --skill vercel-react-best-practices-capjackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/CAPJackie/x/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/CAPJackie/x --skill vercel-react-best-practices-capjackie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you prevent slow React and Next.js behavior by providing concrete, prioritized rules for eliminating waterfalls, reducing bundle size, and optimizing server/client rendering patterns.

Core Features & Use Cases

  • Waterfall elimination: start independent async work early and restructure components to maximize parallelism with React Server Components and API routes.
  • Bundle size optimization: avoid expensive import patterns (like barrel re-exports) and use dynamic/conditional loading for heavy modules.
  • Rendering and re-render efficiency: reduce unnecessary client work using derived-state discipline, memoization where appropriate, and correct dependency scoping.

Quick Start

Use the skill to refactor your React/Next.js codebase for performance while applying Vercel Engineering’s prioritized best-practice rules.

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 eliminate data fetching waterfalls in React Server Components?▼

Reduce React bundle size by avoiding expensive import patterns like barrel re-exports and applying dynamic or conditional loading for heavy modules. This prevents unnecessary client-side JavaScript from bloating the initial payload.

What is the best way to reduce unnecessary re-renders in Next.js applications?▼

Reduce unnecessary Next.js re-renders by applying derived-state discipline, scoped memoization, and correct dependency management across component lifecycles. This minimizes redundant client work and browser runtime overhead.

How do I handle serialization boundaries for server actions in Next.js?▼

Handle Next.js server actions and route handlers serialization by following safe caching and boundary serialization practices for React Server Components. This ensures data passed between server and client remains valid.

Can I use Vercel engineering guidelines to optimize existing React codebases?▼

Apply Vercel engineering guidelines to refactor existing React codebases by choosing correct async parallelization strategies and appropriate dynamic loading patterns. This optimizes performance without requiring a full rewrite.

Why does my Next.js app suffer from slow rendering despite using server-side rendering?▼

Next.js server-side rendering may remain slow due to unoptimized async waterfalls, incorrect server/client boundary serialization, or excessive client bundle size. Refactoring component lifecycles and data fetching patterns resolves these bottlenecks.

Related Skills

Explore More Software Engineering Skills→
cute-baobaocute-baobao

vercel-react-best-practices

Codify React and Next.js performance best practices for reducing waterfalls and bundle size.

Community
Advanced
ZJUxjyZJUxjy

vercel-react-best-practices

Optimize React and Next.js performance with Vercel best practices.

Community
Intermediate
vecearvecear

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
softwarebyzesoftwarebyze

argent-react-native-profiler

Profile React Native Hermes apps to measure re-render behavior and CPU performance.

Community
Advanced