What is Server Components?

Server Components are the default component type in Frontend Accelerator's Next.js 15+ App Router architecture. They execute only on the server, never shipping JavaScript to the client.

Benefits:

• Zero client JS: Reduced bundle size and faster page loads
• Direct database access: Query your database directly without API routes
• SEO optimization: Fully rendered HTML for perfect search engine indexing
• Automatic code splitting: Next.js handles optimization automatically

Key characteristics:

• Cannot use React hooks (useState, useEffect, etc.)
• Cannot access browser APIs (window, localStorage, etc.)
• Can be async functions for data fetching
• Default export in .tsx files unless marked with 'use client'

Example:

// app/dashboard/products/page.tsx
export default async function ProductsPage() {
  const db = new Database();
  const products = await db.getAllProducts();
  
  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

AI-friendly pattern:

Server components in Frontend Accelerator follow clear conventions:

• No 'use client' directive = Server Component
• Direct imports of database models
• Async/await for data fetching
• Props are serializable data only

This predictable structure allows AI tools to instantly understand where server vs. client logic belongs, preventing common mistakes like trying to use hooks in server components.