--- description: Framework-specific patterns for adding features to React 19 applications globs: **/*.tsx, **/*.jsx, **/*.ts, **/*.js --- # Server Components Server Components are the foundation of React 19 applications. They enable automatic server-side rendering and improved performance. ```tsx // DataFeature.tsx async function DataFeature() { const data = await fetch('https://api.example.com/data'); const json = await data.json(); return ( {json.map(item => ( {item.name} ))} ); } ``` Key Patterns - Keep data fetching and database operations in Server Components - Use async/await for server operations - Implement Suspense boundaries for loading states - Structure components hierarchically for optimal streaming # Client Components Client Components handle interactive features and client-side state management. ```tsx // InteractiveFeature.tsx 'use client'; import { useState, useOptimistic } from 'react'; function InteractiveFeature() { const [data, setData] = useState([]); const [optimisticData, addOptimisticData] = useOptimistic( data, (state, newItem) => [...state, newItem] ); return ( {optimisticData.map(item => ( {item.name} ))} ); } ``` Key Patterns - Mark Client Components with 'use client' directive - Use useOptimistic for immediate UI feedback - Implement proper context boundaries for state management - Keep client-side state minimal # Server Actions Server Actions provide a type-safe way to handle form submissions and data mutations. ```tsx // FormFeature.tsx async function submitForm(formData: FormData) { 'use server'; const data = Object.fromEntries(formData); await db.features.create(data); } function FormFeature() { return ( Add Feature ); } ``` Key Patterns - Use Server Actions for form handling and data mutations - Implement optimistic updates for better UX - Structure action boundaries for reusability - Handle validation on both client and server # Performance Optimization React 19 provides powerful tools for optimizing application performance. ```tsx // OptimizedFeature.tsx function OptimizedFeature() { return ( }> }> ); } ``` Key Patterns - Use nested Suspense boundaries for granular loading states - Implement proper code splitting with dynamic imports - Utilize React.memo for expensive computations - Structure routing for optimal code splitting # SEO Optimization React 19 provides built-in SEO capabilities through Server Components and Metadata API. ```tsx // app/page.tsx import { Metadata } from 'next'; export const metadata: Metadata = { title: 'Feature Title', description: 'Feature Description', openGraph: { title: 'Feature Title', description: 'Feature Description' } }; ``` Key Patterns - Use Metadata API for dynamic SEO tags - Implement proper semantic HTML structure - Utilize Server Components for SEO-critical content - Structure routes for optimal crawlability