MENU

Rendering Environments

Next.js allows us to develop a hybrid web application that creates user interfaces in both the client environment and server environment.

By default, Next.js renders your components at the server, in one of the following ways:

• static rendering: user interfaces are created at build times.
• dynamic rendering: user interfaces are created at request times.
• streaming: user interfaces are created at request times, simultaneously as the responses are being delivered.
• partial prerendering: this is an experimental feature that lets Next.js intelligently combines both static and dynamic rendering.

You should use a server component, when you want to:

• fetch data from an origin near the server.
• access backend resources or databases directly.
• prevent sensitive data such as access tokens and API keys from getting leaked out.
• reduce the amount of JavaScript transmitted.
• use Node.js packages.
• improve performance by caching request results across users.
• let search engine bots index your HTML pages and let social network bots generate social card previews for your pages.
• split the rendering work into chunks and stream them to the client as they become ready.

Server Components in Next.js are rendered through a process involving React's APIs, where the rendering is divided into chunks based on route segments and Suspense Boundaries.

On the Server: React renders Server Components into a special data format called the React Server Component Payload (RSC Payload). Next.js uses this payload and Client Component JavaScript instructions to generate HTML on the server.

On the Client: The server-rendered HTML provides a fast, non-interactive preview of the route (for the initial page load only).The RSC Payload is then used to reconcile the Client and Server Component trees and update the DOM.JavaScript instructions are used to hydrate Client Components, making the application interactive.

React Server Component Payload (RSC): The RSC Payload is a compact binary representation of the rendered Server Components tree. It includes:

• The rendered result of Server Components.
• Placeholders and references for where Client Components should be rendered and their corresponding JavaScript files.
• Any props passed from a Server Component to a Client Component.

To designate a component as a client component, include the "use client" directive at the top of the component file.

• On a full page load, a preview of a client component is pre-rendered at the server and delivered to the client. The component is then hydrated(getting attached to event handlers) at the client.
  
• On a subsequent navigation, the client component is rendered entirely at the client. The React bundle is downloaded, parsed, and loaded on the visitor's browser.

You should use a client component, when you want to:

• add interactivity and event listeners such as onClick() and onChange().
• use React hooks such as useState() and useEffect().
• use browser web APIs and properties such as getUserMedia() and location.

You can import a client component into a server component, but you can't import a server component into a client component.