Pre-Rendering in Next.js

Last updated on April 12, 2023

Next.js generates HTML on the server along with content and sends it to the browser that renders for the user is called pre-rendering. It means the browser does send any request to the server for the data after rendering HTML.

Next.js pre-renders pages by default, meaning when you install the next.js application, it will generate pages on the server and send them to the browser to render. Pre-rendering improves page speed and is great for SEO. 

Types Pre-rendering in Next.JS

There are two types of pre-rendering in next.js

  1. Static Generation
  2. Server Side Rendering

1. Static Generation:

In next.js, the static generation generates HTML at build time, meaning for the production when you create a build the next.js generates HTML that reuses for each request. 

The static build contains HTML along with its assets including JavaScript and CSS. Static generation is faster than server-side rendering and is recommended in Next.js’s official documentation. It provides a faster load time that makes the user experience better. 

You can use static generation for making portfolios, blog posts, e-commerce product listings, documentation, and marketing landing pages.

2. Server-side Rendering

In this type, next.js generates HTML for every request. In development mode, when you run the command (npm run dev) it pre-renders the page on each request. Server-side rendering is a bit slower than Static generated build.

Written by
I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on:

Related Posts

Tags: Next.js,