What pre-rendering actually means in layman language
Pre-rendering is nothing but process of generating HTML along with necessary data of the content of requested page by 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
didn't you get the difference?
yeah ! its 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
<body>
<div id="root"></div>
</body>
while if look into the page source of next app running on another tab, we see the whole html code of view that is visible on browser
<body>
<div id="__next" data-reactroot="">
<div class="Home_container__bCOhY">
<main class="Home_main__nLjiQ">
<h1 class="Home_title__T09hD">
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
</main>
</div>
-----------------------------
some more html code here
-----------------------------
</div>
</body>
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 initialising app components and rendering view is known as hydration
Where as in NextJs, instead of generating html after hydration, it is generated pre-handedly and what 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 complete interactive view.
As shown in this figure below
Let's Check it out using examples also
- Image1 showing the data received in network tab on requesting index page in react app
- Image2 showing the data received in network tab on requesting index page in 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 your building an e-commerce web application or blogging website , SEO is of biggest concern.
With React App if Search Engine hits your page, it only sees a "div" tag with id equals to "root", how ever 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
Top comments (0)