Frontend Excellence

Frontend Excellence

React Server Components

Server Components run on the server and send rendered HTML to the client. They can directly access databases, filesystems, and internal APIs without exposing them to the browser.

// app/products/page.tsx (Server Component by default)
async function ProductsPage() {
  const products = await db.query("SELECT * FROM products WHERE active = true");
  return (
    <main>
      <h1>Products</h1>
      <ProductList products={products} />
      <AddToCartButton />  {/* Client Component */}
    </main>
  );
}

Rules:

• Server Components cannot use useState, useEffect, or browser APIs
• Mark interactive components with 'use client' at the top of the file
• Pass serializable props from Server to Client Components (no functions, no classes)
• Keep 'use client' boundary as deep in the tree as possible

Streaming SSR

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      <Header />  {/* renders immediately */}
      <Suspense fallback={<ChartSkeleton />}>
        <AnalyticsChart />  {/* streams when ready */}
      </Suspense>
      <Suspense fallback={<TableSkeleton />}>
        <RecentOrders />  {/* streams independently */}