Challenge: Page with server components

Write a page that fetches products in a server component and passes them to a client component.

Challenge: Page with server components

In this challenge you will write an async server component page. You fetch data with await fetch and return it as HTML.

The page shows a title inside an article tag. Data is fetched on the server; it does not enter the client bundle. The API key stays on the server; it never leaks to the client. The first render is fast.

Exercise Write the ArticlePage server component

Write an ArticlePage server component. Take an id prop. Make it an async function. Fetch with await fetch(`/api/articles/${id}`) and parse with res.json(). Return <article><h1>{article.title}</h1></article>. Export it.

Show example solution

async function ArticlePage({ id }) {
  const res = await fetch(`/api/articles/${id}`);
  const article = await res.json();
  return (
    <article>
      <h1>{article.title}</h1>
    </article>
  );
}
export default ArticlePage;

Test yourself

How does a server component fetch data?
- With await fetch in an async function
- With useEffect
- With setInterval
- With addEventListener
Show answer

With await fetch in an async function — Server components use await fetch as async functions.

Fill in the blank: async function

async function ArticlePage({ id }) {
  const res = await ____(`/api/articles/${id}`);
  const article = await res.json();
  return <article><h1>{article.title}</h1></article>;
}

Show answer

async function ArticlePage({ id }) {
  const res = await fetch(`/api/articles/${id}`);
  const article = await res.json();
  return <article><h1>{article.title}</h1></article>;
}

Next lesson: Challenge: Concurrent search

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies