What is React Server Components (RSC)?

React Server Components (RSC) are a new paradigm in React that allows components to render on the server, sending only the resulting HTML to the client without any JavaScript bundle. This is a game-changer for applications built with Next.js 13+ App Router, such as Frontend Accelerator.

How RSC works:

By default, all components in the app directory are React Server Components. They run exclusively on the server during the build or when a request is made, enabling direct database access, file system operations, and sensitive logic without exposing secrets to the client.

// Server Component (default)
async function UserProfile() {
  const user = await db.getUser("1234");
  return <div>{user.name}</div>;
}

// Client Component (opt-in with directive)
'use client';

function InteractiveButton() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Key benefits:

• Zero bundle size: Server Components don't ship JavaScript to the client
• Direct backend access: Query databases and APIs directly without API routes
• Improved performance: Reduced client-side JavaScript leads to faster page loads
• Better SEO: Fully rendered HTML improves search engine indexing
• Automatic code splitting: Only Client Components are bundled

Server vs Client Components:

• Server: Data fetching, backend logic, large dependencies
• Client: Interactivity, event handlers, browser APIs, React hooks (useState, useEffect)

AI-Friendly: RSC architecture is intuitive for AI to implement. AI can identify which components need client-side interactivity and add 'use client' directives appropriately, optimize data fetching patterns, and ensure proper server/client boundaries for optimal performance.