React Server Components are a new paradigm that allows you to write UI that can be rendered and cached on the server, reducing the JavaScript bundle size sent to the client and improving performance.
Server Components can access backend resources directly, run on the server, and be rendered to HTML.
They can be mixed with Client Components for a hybrid approach.
// Server Component (runs on server) async function UserProfile({ userId }) { const user = await fetchUser(userId); const posts = await fetchUserPosts(userId);
return ( <div> <h1>{user.name}</h1> <UserPosts posts={posts} /> </div> ); }
// Client Component (runs in browser) 'use client'; function UserPosts({ posts }) { const [likedPosts, setLikedPosts] = useState(new Set());
return ( <div> {posts.map(post => ( <Post key={post.id} post={post} isLiked={likedPosts.has(post.id)} onLike={() => setLikedPosts(prev => new Set([...prev, post.id]))} /> ))} </div> ); }