skills.rest
razgulay
razgulayCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify React and Next.js optimizations for rendering, fetching, and bundle size.

Updated Aug 23, 2026
Search Tags:#performance#suspense#react#optimization#nextjs#server-components#code-splitting
One-click install
npx skills add https://github.com/razgulay/my-lobe-chat --skill vercel-react-best-practices-razgulay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/razgulay/my-lobe-chat/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/razgulay/my-lobe-chat --skill vercel-react-best-practices-razgulay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill codifies performance optimization guidelines for React and Next.js, helping teams reduce render times, lower bundle sizes, and improve data fetching efficiency.

Core Features & Use Cases

  • Eliminate waterfalls in data fetching and API routes.
  • Leverage Suspense and dynamic imports to improve perceived performance.
  • Guide server/client boundaries and caching to optimize SSR/CSR.

Quick Start

Provide an initial assessment of a React/Next.js page and emit a concise set of concrete refactors.

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 rendering performance and reduce bundle size?▼

Optimize React and Next.js rendering by applying server component composition, dynamic imports, and Suspense boundaries. This reduces client bundle size, eliminates data fetching waterfalls, and improves SSR and CSR rendering efficiency.

What's the best way to eliminate data fetching waterfalls in Next.js applications?▼

Eliminate Next.js data fetching waterfalls by restructuring API routes and leveraging parallel data fetching. Shifting data fetching to server components and applying proper caching strategies prevents sequential blocking and improves load times.

When should I use Suspense boundaries and dynamic imports in React?▼

Use Suspense boundaries and dynamic imports in React to code-split components and improve perceived performance. This approach defers loading non-critical UI chunks, keeping the main bundle small and rendering interactive content faster.

Does this approach guide server and client component boundaries in Next.js?▼

Yes, guiding server and client component boundaries is essential for Next.js optimization. Correctly placing boundaries minimizes client-side JavaScript, ensuring data fetching and caching occur on the server to optimize SSR performance.

How do I refactor a Next.js page to improve data fetching and caching efficiency?▼

Refactor a Next.js page by assessing its server and client boundaries, then emitting concrete changes. Apply caching strategies and move data fetching server-side to avoid waterfalls and optimize rendering performance.

Related Skills

Explore More Software Engineering Skills→
mouratomourato

performance

Profile CPU and memory usage with Instruments to resolve application performance bottlenecks.

Community
Intermediate
michaelshimelesmichaelshimeles
14

react-best-practices

Optimize React and Next.js performance by eliminating waterfalls and reducing bundle size.

Community
Intermediate
purrgrammerpurrgrammer
38

react

Guide React 19 server components, hooks, and server actions with TypeScript.

Community
Advanced
p-potvinp-potvin
1

vercel-react-best-practices

Review React and Next.js code for performance bottlenecks and bundle size.

Community
Intermediate