Server Components in Next.js 14

Server Components

React Server Components allow you to write UI that can be rendered and OPTIONALLY cached on the server. Rendering is split up by route segments to enable streaming and partial rendering.

Benefits of Server Rendering

• Data Fetching - Server components allow you fetch data to the server. Improve performance
• Security - Rendering on the server, keep sensitive data and logic on server
• Caching - When result is cached and reused on request and across users.
• Bundle size - Allow you to keep large dependencies on the server.
• Initial Page Load and First Content Paint (FCP) - 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.
• Streaming - Allow you to split the rendering in chunks and stream them to a client as they become ready

Server Rendering Strategies

• Static rendering: Rendering of routes happen on the SERVER at build time (when deployed live) or in the background revalidation; The result can be distributed a cached in a Content Delivery Network (CDN). Then the cached result is shared, when a user visits your application. Static rendering is good for UI with no data or data shared across all users
• Dynamic Rendering: Routes are rendered for each user at request time. Next.js will switch to dynamically rendering IF dynamic function or uncached data request is found.
• Streaming - Enables you to progressively render UI from the server. Streaming is built into Next.js App Router by default. Start by using loading.js.