React Server Components

Server Components run on the server and send rendered HTML to the client — reducing JavaScript bundle size.

Syntax

REACT

1
2
3
4
5

// This runs on the server
async function BlogPost({ id }) {
    const post = await db.posts.findById(id);
    return <article>{post.content}</article>;
}

Server Components (Next.js)

REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// This is a Server Component (default in Next.js App Router)
// No "use client" directive = runs on the server

async function PostList() {
    const res = await fetch("https://api.example.com/posts");
    const posts = await res.json();

    return (
        <ul>
            {posts.map(post => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    );
}

export default PostList;

Try It Yourself

Tutorial Complete

Back to React