Rendering
React and Next.js enable you to build web applications by converting your code into user interfaces. They support rendering on both the server and the client, offering flexibility in how your application is delivered to users.
Server Components
React Server Components enhance server-side rendering capabilities by allowing UI code to be rendered and cached on the server. Next.js takes this further by segmenting rendering based on route components, enabling features like streaming. There are three server rendering strategies:
- - Static Rendering
- - Dynamic Rendering
- - Streaming
This page will go through how Server Components work, when you might use them, and the different server rendering strategies.
Using Server Components
By default, Next.js uses Server Components. This allows you to automatically implement server rendering with no additional configuration, and you can opt into using Client Components when needed, see Client Components.
Benefits of Server Rendering
There are some benefits of rendering on server :
- - Data Fetching : Server Components allow you to move data fetching to the server, closer to your data source. This can improve performance by reducing time it takes to fetch data needed for rendering, and the amount of requests the client needs to make.
- - Security : Server Components allow you to keep sensitive data and logic on the server, such as tokens and API keys, without the risk of exposing them to the client.
- - Initial Page Load : On the server, we can generate HTML to allow users to view the page immediately, without waiting for the client to download, parse and execute the JavaScript needed to render the page.
- - Search Engine Optimization : The rendered HTML can be used by search engine bots to index your pages and social network bots to generate social card previews for your pages.
Server Rendering Strategies
The three Server Rendering Strategies are :
Static Rendering (Default)
With Static Rendering, routes are rendered at build time, or in the background after data revalidation. The result is cached and can be pushed to a Content Delivery Network (CDN). This optimization allows you to share the result of the rendering work between users and server requests.
Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page.
Dynamic Rendering
With Dynamic Rendering, routes are rendered for each user at request time.
Dynamic rendering is useful when a route has data that is personalized to the user or has information that can only be known at request time, such as cookies or the URL's search params.
Streaming
Streaming enables you to progressively render UI from the server. Work is split into chunks and streamed to the client as it becomes ready. This allows the user to see parts of the page immediately, before the entire content has finished rendering.
Streaming is built into the Next.js App Router by default. This helps improve both the initial page loading performance, as well as UI that depends on slower data fetches that would block rendering the whole route. For example, reviews on a product page.
This page is summarized version of NextJs's official documentation from Server Components. (here)