xiangteng007 Vercel React Best Practices
Core Principles
- Server Components by Default: Always use React Server Components (RSC) unless interactivity (hooks like
useState,useEffect) is explicitly required. Add'use client'only at the boundary. - Data Fetching: Fetch data inside Server Components using standard
async/await. AvoiduseEffectfor data fetching. - Mutations: Use Server Actions for form submissions and data mutations. Never expose sensitive keys in Client Components.
- Suspense Boundaries: Wrap async components in
<Suspense>to enable streaming rendering. - Caching: Leverage
Next Cacheappropriately tags and revalidation.
Component Structure
- Keep components small and focused.
- Co-locate styles and tests with the component.
- Use explicit prop typing.