Introduction to Server Components

// Server Component (default): can be async, no hooks
async function ServerComponent() {
  const data = await fetchData();
  return <div>{data.value}</div>;
}

// Client Component: first line of the file
"use client";
function ClientComponent() {
  const [state, setState] = useState(initial);
  return <button onClick={() => setState(state + 1)}>{state}</button>;
}

// Run in your local React project (npm install required)
// app/page.js (Next.js App Router — a Server Component by default)
async function getPosts() {
  return [{ id: 1, title: 'Hello World' }];
}
export default async function Page() {
  const posts = await getPosts();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

// Run in your local React project (npm install required)
'use client';

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? 'Liked' : 'Like'}</button>;
}

Introduction to Next.js (server-side React) · Styled Components · Higher-Order Components (HOC) · Splitting UI into Components

1. Trying to use useState or useEffect inside a Server Component — hooks only work in Client Components.
2. Assuming Server Components replace Client Components entirely — most real apps use a mix of both.
3. Forgetting a 'use client' directive at the top of a file that needs interactivity, keeping it (incorrectly) treated as server-only.

• Server Components render on the server, sending finished HTML/output to the browser instead of JS to run there.
• They can't use hooks, browser APIs, or event handlers — those require Client Components.
• A 'use client' directive at the top of a file marks it (and its children) as a Client Component.
• This model is primarily used via frameworks like Next.js, not plain client-side React apps.

Requires a framework with Server Components support (Next.js 13+ App Router); not a plain client-side React feature and can't run in this preview sandbox.