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.
There are two types of pre-rendering in next.js
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.