snippettypescriptnextjsModeratepending

React Server Components -- zero-bundle server-only components

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

Next.js 13+

Server Componentsuse clientRSCzero bundleserver-onlyasync component

nodejsbrowser

Problem

Client components ship JavaScript for rendering, even when the component only needs to fetch data and display static content. This bloats bundle size.

Solution

React Server Components (RSC) run only on the server. They can access databases, file systems, and APIs directly. Zero JavaScript shipped to the client.

Code Snippets

Server Components with client interactivity islands

// Server Component (default in App Router)
// This component ships ZERO JavaScript to the client
async function UserProfile({ id }: { id: string }) {
  const user = await db.query('SELECT * FROM users WHERE id = $1', [id]);
  const posts = await db.query('SELECT * FROM posts WHERE author = $1', [id]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
      {/* Client component for interactivity */}
      <LikeButton postCount={posts.length} />
      <PostList posts={posts} />
    </div>
  );
}

// Client Component -- only this ships JS
'use client';
function LikeButton({ postCount }: { postCount: number }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>Like ({postCount})</button>;
}

// Rules:
// - Server Components CANNOT use hooks, event handlers, or browser APIs
// - Client Components CANNOT be async or access server resources directly
// - Server Components CAN import Client Components (not vice versa)

Revisions (0)

No revisions yet.