Server Components

Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server.

This separate environment is the “server” in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.

Note: renders ahead of time mean:

"**Renders ahead of time**" means that the component’s output (HTML) is generated **before** the user’s browser ever sees it—specifically, on the server, either at build time or when a request is made. This is different from components that run in the user’s browser (client-side), which are rendered "on demand" when a user interacts with the page.

### In the context of Next.js Server Components:

- **Server Components** are rendered ("run") on the server—either when you build your app or whenever someone requests a page.

- The resulting HTML (and sometimes some additional data) is sent to the browser.

- The user's browser doesn't need to run any JavaScript to generate the initial content for these components.

- This is why you might also hear "server-side rendering," but Server Components are even more efficient for certain use cases because they don’t require shipping the component’s JavaScript to the browser at all.

### **Example:**

- If your product page uses a Server Component, the product information is fetched and HTML is built on the server. When the user opens the page, they instantly see the fully-rendered product info—no waiting for JavaScript to run or data to be fetched in their browser.

### **Summary Table**

| | Rendered Ahead of Time? | Where Rendered? |

|------------|-------------------------------|----------------------|

| Server Component | Yes | On the server |

| Client Component | No (renders as user interacts)| In the browser/client|

So, **"renders ahead of time" simply means "generated on the server before the user sees the page."**