Rendering converts the code you write into user interfaces.
React 18 and Next.js 13 introduced new ways to render your application. This page will help you understand the differences between rendering environments, strategies, runtimes, and how to opt into them.
There are two environments where your application code can be rendered: the client and the server.
Note: Server is a general name that can refer to computers in Origin Regions where your application is deployed to, the Edge Network where your application code is distributed, or Content Delivery Networks (CDNs) where the result of the rendering work can be cached.
Before React 18, the primary way to render your application using React was entirely on the client.
Now, with Server and Client Components, React can render on the client and the server meaning you can choose the rendering environment at the component level. By default, the
app and render on the client.
You can interleave Server and Client Components in your application, and behind the scenes, React will seamlessly merge the work of both environments.
Checkout the Server and Client Components page to learn how to choose between Server and Client Components.
In addition to client-side and server-side rendering with React components, Next.js gives you the option to optimize rendering on the server with Static and Dynamic Rendering.
With Static Rendering, both Server and Client Components can be prerendered on the server at build time. The result of the work is cached and reused on subsequent requests. The cached result can also be revalidated.
Server and Client components are rendered differently during Static Rendering:
With Dynamic Rendering, both Server and Client Components are rendered on the server at request time. The result of the work is not cached.
Note: This is equivalent to Server-Side Rendering (
On the server, there are two runtimes where your pages can be rendered:
Both runtimes support streaming data from the server, depending on your deployment infrastructure.
Note: When deploying Next.js to Vercel, route segments that use the Edge Runtime can be deployed globally as Edge Functions for improved performance. Both the Node.js and Edge runtimes can be deployed to Origin Regions to be placed geographically close to your data. Both runtimes support streaming responses, including Instant Loading States.
To learn how to switch between runtimes, see the Edge and Node.js Runtimes page.