Rendering in Next.js

The process of converting the React code you write into the HTML version of your user interface is called rendering. Both the server and the client have the capability of rendering. It may occur either in advance during build time or on each request during runtime.

Next.js has three types of rendering methods.

  • Server-side rendering
  • Static site generation
  • Client-side rendering


Server-Side Rendering and Static Site Generation are also known as Pre-Rendering.

Next.js pre-render every page by default. This indicates that instead of letting client-side JavaScript handle all of the HTML creation, Next.js generates HTML for every page in advance.

Every generated HTML file includes the bare minimum of JavaScript code. The JavaScript code on a page is executed when the browser loads it, it makes the page completely interactive this process is called hydration.

Why Pre-render?

Improves performance - The HTML for a pre-rendered page is already generated, so it loads faster.

Helps with Search Engine Optimization (SEO) - The search engine encounters a pre-rendered page, all of the content is present in the source code, which will help index that page.

Types of Pre-rendering:

Next.JS has two forms of pre-rendering

  1. Static Site Generation (SSG)
  2. Server-Side Rendering (SSR)

Static Site Generation:

Static Site Generation is the process that produces HTML during build time. Then, for each request, the pre-rendered HTML is used. By default, Next.js will pre-render the content of an HTML page if it doesn't need any external data. However, Next.js will fetch and download the necessary data before and generate the HTML if our web page requires information from an external API. During the build phase, everything is completed.

You can statically create pages in Next.js with or without data.

Server Side Rendering:

Server Side Rendering approach creates an HTML page for every request, which is slower than Static Site Generation. It is suitable for dynamic content, which changes regularly.

For websites like News Feed, Server Side Rendering works well.

Stay tuned for more next.js blogs!!!!!

Dnyaneshwari Abuj

Dnyaneshwari Abuj