Generate comprehensive documentation for Next.js Server Components, explaining rendering strategies, when to use Server vs Client Components, data passing patterns, and best practices for the App Router.
Generate comprehensive documentation for Next.js Server Components based on the official Next.js documentation, covering rendering strategies, component composition patterns, and best practices.
This skill helps you create detailed documentation about Next.js Server Components, including:
When the user requests documentation about Next.js Server Components:
1. **Analyze the documentation structure** from the source content (nextjs.org/docs/app/building-your-application/rendering/server-components)
2. **Extract key concepts** in this order:
- Server Components vs Client Components comparison
- When to use each component type
- How rendering works on server and client
- The React Server Component Payload (RSC)
- Hydration process
- Navigation behavior
3. **Create practical examples** demonstrating:
- Using the 'use client' directive correctly
- Passing data from Server to Client Components
- Reducing JavaScript bundle size
- Interleaving Server and Client Components
- Context providers with Server Components
- Third-party component integration
4. **Document best practices**:
- Add 'use client' only to interactive components, not entire layouts
- Keep most UI as Server Components by default
- Pass data via props rather than client-side fetching
- Use React.cache() for sharing data across Server Components
- Handle serialization constraints (no functions/class instances in props)
5. **Include decision flowchart** helping developers choose between Server and Client Components:
- Need state/effects/browser APIs? → Client Component
- Fetch data/use secrets/reduce JS? → Server Component
- Static UI elements? → Server Component
6. **Add code examples** with TypeScript types showing:
- Basic Server Component fetching data
- Client Component with 'use client' directive
- Layout pattern with mixed Server/Client Components
- Props passing from Server to Client
- Context provider wrapper pattern
7. **Explain the rendering process**:
- Server: RSC Payload generation, pre-rendering HTML
- Client: HTML preview, hydration, interactivity
- Navigation: Prefetching, client-side updates
8. **Address common issues**:
- "use client" boundary behavior
- Serialization errors with non-serializable props
- Bundle size bloat from misplaced 'use client'
- Context usage across Server/Client boundary
9. **Format the documentation** with:
- Clear headings and sections
- Code blocks with syntax highlighting
- Inline code for technical terms
- Tables for comparison matrices
- Callout boxes for important notes
10. **Validate completeness** by ensuring coverage of:
- Conceptual understanding
- Practical implementation
- Performance implications
- Migration guidance from Pages Router
- Edge cases and limitations
**User**: "Create documentation for Next.js Server Components"
**AI Response**: Generates a comprehensive markdown document covering all aspects of Server Components, including when to use them, how they work, practical examples, and best practices for building Next.js applications with the App Router.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-server-components-documentation/raw