Diving into the World of Rendering with Next.js: A Starter Guide

Rendering is a process that turns written code into a user interface, React and Nextjs make it possible to create hybrid web applications where parts of the code can be rendered on the server or client.

CSR (Client Side Rendering) / Client Components

Client Side

CSR (Client Side Rendering) renders pages in the client browser using JavaScript, the server only sends minimal HTML and JavaScript to the client, then the rendering process is carried out in the browser.

When the application is first opened the page will load a little before it opens completely, this is because the page will not be displayed until the javascript is completely processed by the browser.

CSR (Client Side Rendering)

Benefits of Client-Side Rendering

1. The web is more interactive
2. Can access browser APIs such as localStorage and geolocation

Disadvantages of Client-Side Rendering

1. Initial load time takes time
2. Not SEO Friendly

SSR (Server Side Rendering)  / Dynamic Rendering

Server Side

SSR renders pages dynamically on the server when the user makes a request. The server sends the finished HTML and JavaScript to the client. Next, the hydration process will be carried out by React in the client browser.

When a user moves to a page that uses SSR, the user will experience a slight delay before moving to another page.

By default, Next.js uses Server Components / SSR. This makes it possible to automatically apply server rendering without additional configuration, and we can choose to use Client Side Rendering when necessary by simply adding 'use client' to the first line.

SSR (Server Side Rendering)

Advantages of Server-Side Rendering

1. SEO Friendly
2. Store sensitive data and logic on the server, such as tokens and API keys, without the risk of exposing it to clients

Disadvantages of Server-Side Rendering

1. The server load becomes heavy
2. Transitions between pages are slightly slower

Static Site Generation (SSG) / Static Rendering

Static Site

SSG renders HTML pages during build time, or when running the next build. Usually, SSG is used for apps that do not use dynamic data.

• Marketing pages
• Blog posts and portfolios
• E-commerce product listings
• Help and documentation

Benefits of Client-Side Rendering

1. Web performance is excellent
2. SEO Friendly

Disadvantages of Client-Side Rendering

1. Data is not real-time

Streaming

Streaming is a data transfer technique that breaks routes into smaller "chunks" and progressively streams them from the server to the client as they are ready.

Streaming

With streaming, you can prevent slow data requests from blocking your entire page. This allows users to view and interact with parts of the page without having to wait for all the data to load before the user interface can be displayed to the user.

There are 2 ways to use streaming, namely:

        1. At page level using loading.tsx

By adding the loading.tsx file, NextJs automatically creates a UI fallback while the content page is still loading.

File Directory

Code

Example 1: Streaming using loading.tsx

We can add a stream to each page using loading.ts, but it will cause a longer loading time if there is one component that retrieves data slowly, the user cannot interact or see other parts besides the navigation menu.

        2. In Specific Components use <Suspense>

Create a Skeleton for fallback

Add <Suspense> to the component you want to provide Streaming

Example 2: Streaming using <Suspense>

If we look at the example above, the top 4 cards display the loading skeleton first, almost the same as the Latest Invoices section cards which also display the skeleton first but retrieving the data is quite time-consuming, the user can still see other sections while waiting for the Latest invoices to load.

Source:

NextJS Documentation: Rendering

Demystifying rendering of NextJS | Cleverzone

Visual Explanation and Comparison of CSR, SSR, SSG and ISR | Dev.to

WTF Do These Even Mean | Web Dev Simplified 

Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) | theodorusclarence

Rendering | Codevolution

Key Differences Between Client-Side, Server-Side and Pre-rendering | Clockwise Software