01 / Foundation
Understand the concept
Server Components render on the server, allowing applications to send less JavaScript to the browser and improve initial page performance.
In Next.js App Router, components are Server Components by default unless marked with the 'use client' directive.
02 / Implementation
Server Component Example
page.tsx
async function getUsers() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/users"
);
return response.json();
}
export default async function UsersPage() {
const users = await getUsers();
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}04 / Interview