---
title: Rendering
description: Learn the differences between Next.js rendering environments, strategies, and runtimes.
---

Rendering converts the code you write into user interfaces. This section will help you understand the differences between rendering environments, Client and Server Component rendering, static and dynamic rendering, and runtimes.

## Background

There are two environments where web applications can be rendered: the client and the server.

<Image
  alt="Client and Server Environments"
  srcLight="/docs/light/client-and-server-environments.png"
  srcDark="/docs/dark/client-and-server-environments.png"
  width="1600"
  height="672"
/>

- The **client** refers to the browser on a user's device that sends a request to a server for your application code. It then turns the response from the server into an interface the user can interact with.
- The **server** refers to the computer in a data center that stores your application code, receives requests from a client, does some computation, and sends back an appropriate response.

Before React 18, the primary way to render your application was entirely on the client. Next.js provided an easier way to break down your application into **pages** and render on the server.

Now, with Server and Client Components, **React renders on the client and the server**, meaning you can choose where to render your application code, per component.

By default, the App Router uses Server Components to improve performance, and you can opt into using Client Components when needed.

Learn more about rendering by exploring the sections below:
