What is Server Component in React: Simple Explanation and Example

A server component in React is a component that runs only on the server and sends HTML to the client, improving performance by reducing JavaScript sent to the browser. It allows you to fetch data and render UI on the server without sending extra code to the user’s device.

How It Works

Think of a server component like a chef in a restaurant kitchen. The chef prepares the dish (UI) behind the scenes (on the server) and sends the finished plate (HTML) to the customer (browser). The customer doesn’t see the cooking process or need to do any work; they just get the ready meal.

In React, server components run on the server and generate HTML before sending it to the browser. This means less JavaScript code is sent to the client, making the page load faster and use less memory. The client only handles interactive parts, while the server handles data fetching and rendering.

This setup helps apps load quickly and work well on slow devices or networks because the heavy lifting happens on the server.

Example

This example shows a simple React server component that fetches a greeting message and displays it. It runs on the server and sends HTML to the client.

javascript

import React from 'react';

// This is a server component
export default async function Greeting() {
  // Simulate fetching data on the server
  const message = await new Promise(resolve =>
    setTimeout(() => resolve('Hello from the server!'), 100)
  );

  return <h1>{message}</h1>;
}

Output

<h1>Hello from the server!</h1>

When to Use

Use server components when you want to improve performance by reducing JavaScript sent to the browser. They are great for parts of your app that show data but don’t need to be interactive, like blog posts, product lists, or user profiles.

Server components help keep your app fast and efficient, especially on slow devices or networks. Use them to fetch data securely on the server and avoid exposing sensitive logic to the client.

Key Points

• Server components run only on the server and send HTML to the client.
• They reduce the amount of JavaScript sent to the browser, improving load speed.
• Ideal for static or data-driven UI that doesn’t require client interaction.
• Help keep sensitive data and logic secure on the server.
• Work well combined with client components for interactive parts.

Key Takeaways

Server components run on the server and send HTML to the client, reducing JavaScript load.

They improve app performance by handling data fetching and rendering on the server.

Use them for UI parts that don’t need client-side interaction.

Combine server components with client components for full app functionality.

Server components help keep sensitive logic secure by not exposing it to the browser.