frontend-server-components

What problem does it solve?

This Skill helps teams reduce server-side rendering overhead, unnecessary RSC serialization, and insecure server function usage by providing concrete patterns to optimize performance and enforce authentication and input validation.

Core Features & Use Cases

• Auth-safe Server Functions: Guidance to verify authentication and authorization inside 'use server' functions and validate inputs to prevent unauthorized access.
• RSC Serialization Minimization: Recommendations to avoid duplicate serialization at RSC-to-client boundaries and to only pass necessary fields.
• Caching and Concurrency Patterns: Advice on per-request React.cache usage, cross-request LRU caching, module-level hoisting for static I/O, parallel data fetching via component composition, and detached promises for non-blocking tasks.
• Use Case: Improve page latency and security in a Next.js app that uses React Server Components, where multiple components fetch overlapping data and expose server functions for user actions.

Quick Start

Analyze my React Server Component and Server Function code and suggest changes to minimize serialized props, add per-request React.cache deduplication, and ensure each server function enforces authentication and input validation.