Summary - Server Components
- React course
- Expert
- Lesson 8/32
- 5 min
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.
Practice 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.
Starter code
// Write the ArticlePage server component hereSample 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;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is wrong?
- A function can be passed to a client component Correct answer
- 'use client' works per file
- fetch is cached on the server
- A server component can be async
Explanation: Functions cannot be serialised, so they cannot be passed.
2 Fill in the blank: refresh with revalidate
await fetch(url, { next: { revalidate: ____ } });await fetch(url, { next: { revalidate: 60 } });Explanation: revalidate takes a number in seconds.
3 Match concepts
| Term | Meaning |
|---|---|
Server Component |
Renders on server |
'use client' |
Marks client |
await fetch |
Waits on server |
revalidate |
Refresh period |