Concept Of Pre-Rendering In NextJs

Concept Of Pre-Rendering In NextJs

What pre-rendering actually means in layman language

Pre-rendering is nothing but the process of generating HTML along with necessary data of the content of the requested page by the client in our application.

Yeah, It might be confusing a bit let's understand it with an example

In the picture shown below, Two pictures showing the page source of a next and react app

Were you able to get the difference?

Yeah! It's the difference between the HTML content that both of these are showing, In the first picture, showing react page source shows a single empty div tag with id root

    <div id="root"></div>

while if look into the page source of the NextJs app running on another tab, we see the whole HTML code of view that is visible on the browser

  <div id="__next" data-reactroot="">
    <div class="Home_container__bCOhY">
      <main class="Home_main__nLjiQ">
        <h1 class="Home_title__T09hD">
          Welcome to <a href="">Next.js!</a>
    some more html code here 

Yes! this is what is the very basic stage from which we can start understanding the concept of pre-rendering

In react, the HTML for the page requested is not produced but, the client is provided with the javascript code which on compiling gives us the requested view, and this process of initializing app components and rendering view is known as hydration

Whereas in NextJs, instead of generating HTML after hydration, it is generated pre-hand, and what the client receives is the view, although this view is raw HTML code only without any interactions code and these interactions(Js logical code) get added after the client perform hydration and hence the what user see in browser is the complete interactive view.

As shown in this figure below

Hydration in React Vs NextJs

Let's check it out using examples also

  1. Image1 showing the data received in network tab on requesting index page in react app

2. Image2 showing the data received in network tab on requesting index page in the NextJs app

As discussed above, we can clearly see the difference that makes a lot of differences in working of both and hence on efficiency also.

Now the question is how this pre-rendering is useful to the end-users ??

In React we need to wait for the javascript to be executed also for the data to be fetched from external API's and then finally our UI is rendered. But with pre-rendering the HTML is already generated, thus the wait time gets decreased significantly, resulting in more efficient and fast loading of requested pages/views.

Another most important concept in which NextJs benefits a lot is SEO(Search Engine Optimization). Especially if you're building an e-commerce web application or blogging website, SEO is of the biggest concern.

With React App if Search Engine hits your page, it only sees a "div" tag with id equals to "root", however, if it hits the pre-rendered page in which all the HTML source code is present which helps search engine in indexing that page in search results easily