When will you use this?

Learn this when you join a team on React 18/19 or Next.js — not required for your first todo app.

• New React apps may use Server Components and Suspense for faster first load.
• Next.js jobs expect you to know when code runs on server vs browser.

Real-world: catalog server + cart client

E-commerce uses Server Components for product grid (SEO) and client components for interactive cart drawer.

Production-style code

// ProductGrid.jsx — server
async function ProductGrid() {
  const products = await getProducts();
  return products.map(p => <ProductCard key={p.id} product={p} />);
}

// AddToCart.jsx — client
'use client';
export function AddToCart({ productId }) {
  const add = useCartStore(s => s.add);
  return <button onClick={() => add(productId)}>Add</button>;
}

What happens in production: Hybrid architecture minimizes JS on catalog while keeping cart snappy — Next.js shop standard.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

app/                    → Next.js routes (server + client)
features/checkout/      → client feature module
lib/api/queryClient.js  → TanStack Query setup
components/ui/          → shared buttons, inputs

Line-by-line walkthrough

How it works (big picture)

• Not every app needs Next.js — but separating server data, UI state, and routes clearly is universal.
• Follow the practice steps below on your own project — typing code yourself is the fastest way to learn.

Do this on your computer

1. Pick framework: Vite SPA vs Next.js based on SEO needs.
2. Separate api/, features/, components/.
3. Document which layers use server vs client.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running Modern React Architecture and inspect component props/state.

Remember

Server + client split where it helps. Query for API data. Feature folders for scale.

Common questions