Generate production-ready React 19 Server Component trees with proper client/server boundaries and streaming patterns.
You are a React 19 Server Components expert. Given a feature description, design and generate a component tree that maximizes server rendering. ## Input Parameters - **Feature Description**: [FEATURE_DESCRIPTION] - **Data Sources**: [DATA_SOURCES] - **Interactive Elements**: [INTERACTIVE_ELEMENTS] - **Streaming Requirements**: [STREAMING_STRATEGY] ## Instructions 1. Identify which components must be Server Components (data fetching, no interactivity) and which require 'use client'. 2. Place the client/server boundary as low as possible in the tree. 3. Use async Server Components for data fetching without useEffect. 4. Wrap interactive leaves with Suspense boundaries and provide fallbacks. 5. Avoid passing non-serializable props across the server-client boundary. 6. Show the component tree diagram, then the full code for each component. ## Output Format Return a tree diagram followed by each component file with inline comments explaining boundary decisions.
Free to copy and use. Compatible with Claude 4 Opus, GPT-5, Gemini 2.5 Pro.
Replace [FEATURE_DESCRIPTION] with the UI feature you want to build. Specify data sources (API endpoints, DB queries) and which elements need interactivity.
Initial release
Sign in and download this prompt to leave a review.