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>
  );
}