How do Server Components differ from Client Components in React, and when should each be used?

Imagine a restaurant. A Server Component is like a dish that has already been prepared in the kitchen and is served to you — you don't need cooking tools (JavaScript) at the table. It's lightweight, fast, but not interactive (no button clicks, no typing). A Client Component is like a hot pot that you cook at the table — it comes with a gas stove and tools (JS downloaded to your machine) — it's heavier but allows for user interaction. The principle is: whatever can be pre-cooked should be handled by the kitchen; only bring the gas stove to the table when the customer truly needs to cook themselves.