Page with server components

Write a page that fetches data with a server component.

Page with server components

In the third step you will write a server component page. ProductPage is an async function that fetches products with await fetch.

The starting code includes the Button and ThemeProvider solutions; so the design system and theme are ready. The page renders on the server and reaches the client as HTML.

Products are listed inside a <ul>; each tracked by a key.

Combining with client components

Data is passed from a server component to a client component as props. For example <Button variant="primary">Buy</Button> is a client component; but it can be used inside ProductPage.

This split keeps data fetching on the server and interaction on the client. The bundle stays small and the first render fast.

A client component can also be passed as children.

Exercise Write the ProductPage server component

Write a ProductPage server component. async function ProductPage(). Fetch with await fetch('/api/products') and parse with res.json(). Inside a <main> show <h1>Products</h1> and inside a <ul> map products to <li key={p.id}>{p.name}</li>. Export it.

Show example solution

async function ProductPage() {
  const res = await fetch('/api/products');
  const products = await res.json();
  return (
    <main>
      <h1>Products</h1>
      <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
    </main>
  );
}
export default ProductPage;

Test yourself

Match server component concepts

async function

Fetches on server
await fetch

Waits for data
res.json

Parse to JSON
products.map

Render the list
What kind of component is ProductPage?
- Client component
- Edge component
- Shared component
- Server component (async)
Show answer

Server component (async) — ProductPage is an async server component.

Fill in the blank: list the products

<ul>{products.map(p => <li ____={p.id}>{p.name}</li>)}</ul>

Show answer

<ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>

Next lesson: Concurrent features

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies