Summary - Server Components

Fetch products in a server component and pass them to a client component.

Summary - Server Components

In this group you learned what Server Components are, the client-server split and data fetching in RSC.

Server components render on the server, fetch data directly and send HTML. Interactive parts move to the client with 'use client'. Functions cannot be passed; data flows as props.

Now you will write a server component.

Exercise Write the ArticlePage server component

Write an ArticlePage server component. Take an id prop. Make it an async function. Fetch with await fetch(`https://api.example.com/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(`https://api.example.com/articles/${id}`);
  const article = await res.json();
  return (
    <article>
      <h1>{article.title}</h1>
    </article>
  );
}
export default ArticlePage;

Test yourself

Which is wrong?
- A function can be passed to a client component
- 'use client' works per file
- fetch is cached on the server
- A server component can be async
Show answer

A function can be passed to a client component — Functions cannot be serialised, so they cannot be passed.

Fill in the blank: refresh with revalidate

await fetch(url, { next: { revalidate: ____ } });

Show answer

await fetch(url, { next: { revalidate: 60 } });

Match concepts

Server Component

Renders on server
'use client'

Marks client
await fetch

Waits on server
revalidate

Refresh period

Next lesson: What is streaming SSR?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies