Different forms of Pre-rendering in NextJS

Next Js is a React-based full-stack framework that enables functionalities like pre-rendering of web pages. Unlike traditional react app where the entire app is loaded on the client, Next Js allow the web page to be rendered on the server, which is great for performance and SEO. You can learn more about Next Js here.

Before we get into the different types of Pre-rendering, let’s first define Pre-rendering.

Pre-rendering: Next Js pre-renders all pages by default, which means that Next Js will generate HTML for each page in advance rather than relying on client-side javascript to do it all. So, instead of seeing a blank screen and waiting for javascript to load, the user will see complete HTML content on the first load (but with no interactivity until javascript is loaded). The server is responsible for generating all of the content on a web page. Pre-rendering content improves performance and SEO because the SEO crawler can now read actual content quickly and rank your web page accordingly.

Pre-rendering: 

Without Pre-rendering: 

Different Pre-rendering forms in Next Js: Next Js provides three different pre-rendering techniques:

1. Static Site Generation (SSG): It is the method that generates HTML at build time. The pre-rendered HTML is then used on each request. If we have an HTML page that doesn’t require any external data, Next Js will pre-render its content by default. (Example: About Page). But if our web page requires data from some external API then Next Js, as part of the static generation process will fetch & download the data in advance & generate the HTML. All of this is done during the build time. All of the pre-generated content is then stored in a CDN, so that whenever a user requests to view the web page, a cached version is sent, resulting in improved performance.

This method is suitable for pages with static content, like about page, contact page, etc.

2. Incremental Site Regeneration: In static site generation, there is no room for dynamic content. In this method, HTML is generated at regular intervals, allowing you to create or update static pages after you have built the site. It combines the power of static generation with the flexibility of dynamic content. Whenever a request is made, the page is generated statically with the initialization of a specific interval (say, 60 seconds). After that interval, the page is re-downloaded or re-generated. So the first user may see stale data, but from then on, every user will see fresh data.

This form is suitable for pages that have dynamic content but doesn’t change very frequently like the Product page for any e-commerce website as products’ price could change.

3. Server-Side Rendering: It is the pre-rendering method that generates an HTML page for each request, making it slower than the other two methods because no content is cached. However, it is appropriate for dynamic content that changes frequently.

This method is suitable for pages like News Feed.

You can now decide which form is appropriate for your web page based on the use case. It’s a good practice is to always check to see if we can statically generate any data, as it’s much faster. The main advantage of pre-rendering is that SEO crawlers can quickly discover and rank the page content. It also improves performance as the page will render faster because the content has already been rendered.