What is Client Components?

Client Components in Frontend Accelerator are React components marked with the 'use client' directive, indicating they should execute in the browser and support full React interactivity.

When to Use Client Components:

• Interactive UI elements (buttons, forms, modals)
• React hooks (useState, useEffect, useContext)
• Browser APIs (localStorage, window, geolocation)
• Event handlers (onClick, onSubmit, onChange)
• Third-party libraries that require browser environment

Structure:

'use client';

import { useState } from 'react';

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

Best Practices in Frontend Accelerator:

• Keep client components small: Push them as deep as possible in the component tree
• Lift server logic up: Fetch data in Server Components, pass as props to Client Components
• Use composition: Wrap client interactivity around server-rendered content
• Avoid unnecessary client boundaries: Don't mark components as client unless they need interactivity

AI-Native Architecture:

The clear 'use client' directive makes it trivial for AI tools to:

• Identify which components can use hooks
• Understand the client/server boundary
• Suggest moving logic to appropriate component types
• Avoid mixing server-only APIs with client code

Client Components are automatically code-split by Next.js, and Frontend Accelerator's build process optimizes them for minimal bundle size.