There is a huge commotion that a big change in React ecosystem is coming, new React Server Components are coming, and there is a lot of interest in Next.js and Remix. These frameworks have become so popular that on the official website of React, it is said that either you use Next.js or Remix, or Gatsby for the project.
So it is important for us to understand what is happening. See, we understand where the journey of web development started! Any web app or web page has a straightforward thing called a template.
What is a template?
The simplest example of a template is a wedding card. You get a wedding card if there has been a marriage at your home.
What is written on the card?
Shri, Smt, this, that! The address is written below.
And what do you fill?
You write their address. Any form you fill, it is already given space.
What is that?
It is a template.
It is written that shows the information this way because people would like to read it this way. When we see this thing as a web, let us open any website and see.
So if we look at the Flipkart website for a second, what is this? This is a template. You can see that whatever information is in it is being repeated repeatedly, here and here.
How do you see it? See, this is the name of the phone. This is the same everywhere. Here too! Then this is its rating. Right? Then this is its price. You will see this everywhere. Different prices! Then you see this is the image of the phone. See this is the phone details.
These are also made so that the details will come in the list, right? Details are coming in the list. See this! So what is all this? This is a string. You can also see that there is a string here. This thing with money is an integer.
Do you know why this is an integer? Why am I saying this is an integer? Because here we can control it from this place. And here is the pricing of the integer. That’s why you can control it. So this will be the integer value. This is an image. Right? We know this thing!
How much is this rating? This is your rating. This piece is an integer. Again I will tell you why it is an integer. See, because you can control it from here.
So if you learn to break the website, you will understand it has nothing! If I design one card well, you see it? If I designed this card well and learned to run it on repeat. So what else do I need? I don’t need anything!
So once we understand this thing a little differently that what is happening? It is happening that there is an image in a card. There is some text, in big size, which is the name of the card. There is some rating. There is some other text which has many text lines.
There is a price. Right? So see, this is a template! And you see, this same template is repeated! So this thing becomes multiple times. How does it repeat? Something that happens gets done by the for loop.
It will happen in any loop. You can call it a map in JavaScript. Do anything, but it will repeat! See something more interesting. See something exciting! I will show you the website once again! We will go back to the Flipkart website.
See, we will show you this thing again! How does the template work? We saw Poco. Now we will see something else instead of POCO. We will go to TV and appliances, so see; we are watching Mi TV! See, the same thing is visible in this! Are you seeing this? See, the same thing is visible in this.
This is There is an image here! Same to same! Here is the name. Here is the rating. Here are the details. Here is the price. See? The same thing. See here Flipkart Assured! See? So once I made a template.
It is very important to understand, Once we make a template, we are using it on every product listing page, and we are using it for every product.
And if you see this on the product page, then all the product pages of Flipkart will be the same! So we understand that it is all about templates, and what is the whole game? So when templates were used before, then such templates were used in which you used to put data in the middle.
Now where does this data stay? We talked about it before that data stays in the database. Right? How does data stay in the database? Data in the database is such that, there will be a long big table, and it will be written that this phone Poco has a rating is 4.1. Its image URL is this. Its details are this.
It’s Flipkart Assured. Its price is 5999. It will be written like this. And the same will be filled in the same way. More details will be there! Do you understand this? That data stays in the database like this! And what does it do? An engine takes this data and puts it in this template. So what will it do?
It will say that, see, put the image URL here. Put the details here! Put the Flipkart Assured here. Put the price here. And put the name here.
This is what happens! Data is put in the template. Do you understand this? Now I will explain the history of putting this, putting data into the template.
What used to happen before? This template and this data In the earlier times, 10 years ago and 5 years ago, This data used to be in the DB, and this template used to be on the server.
So this is your server, and this is your database! And this whole work used to be done on the server. This was called server side. The server side means the whole work is done on the server, and here by combining these two, by combining the template and data, an HTML page was created.
HTML page was created. This is what Ruby used to do, Django used to do, and PHP used to do. So PHP, Ruby, Django, what did they do? They used to say give me a template and a DB, so I will combine both and give you an HTML page.
Like Subhash Chandra Bose used to say Give me blood, I’ll give you freedom. In that way, they used to say give me a template and DB, and I will give you a page. And where did this page used to come from? This page used to come to the client. This is your client. So this page used to appear in this. Do you understand this? This was the story before! Then what happened in between? Then what happened a few years ago? What we have discussed, what happened a few years ago, your game has changed slightly. Now on the server, on the server side, there is no template! Data remains! Okay, data remains.
So where does the template come from? The template is sent to the client, which is the client side. And the template came here. How did the template come? In JavaScript.
So what we saw in Ruby, what we saw in Django, and what we saw in PHP, Instead of that, JavaScript template came here. Who brought this template here? React Who else brought it? Vue Who else brought it? Angular They said, look, brother, we’ll make the whole page in JavaScript.
Okay, let’s go back once again! When it used to be here, there used to be interactivity on the page. It was not like that HTML page did not have JavaScript earlier.
JavaScript was there earlier. Client-side JavaScript used to be there. But it was lesser. So client-side JavaScript used to be like this, You filled the form, so before submitting, check whether the required fields have been added or not and whether it is properly added.
They used to hide in small shows. How did they do it? Through jQuery! JQuery used to run JavaScript on the client side, but not full-fledged apps.
HTML page used to be made from the server, and because it was made from the server, you used to get that blank white canvas in the middle. But when SPA came, What is SPA? We have talked about it many times.
Single Page Application When SPA came, the whole page started to be made on the client side. What does the client side mean? This means that on your phone, on your tablet, and your laptop, data is being added to the entire template.
We have understood to add data in the template. But earlier, what used to be on the server started to be on the client, and the same thing was there on the client.
JSX templates are like this, and where does the data come from? It comes from the server through API. Okay, so the server, this server has a server. There is a DB.
Again we have talked about this first, and data comes through API. So what happens is your page is loaded first. It remains empty. The data comes from the server.
That is, data comes from API, then this page is created. And you interact with it. So the entire page is created on the client side. It is being created on React, not on the server.
You have understood this much. What were the problems with this? What were the issues of this? The issues were that SEO could not be done because the page was not being created on the server. So SEO becomes difficult. What were the issues of this? Takes more time, time to interact increases.
Why did it increase? Because when the page was created on the server, It was created quickly. Now on the client, first JavaScript comes. First, JavaScript comes on the client, and the first download happens.
Then compile happens. When it’s compiled, it says I’ve compiled. Now I will call API. API calls! The API takes time to get data. The data comes. When data comes from API & JavaScript, the page is created, and interactivity starts. First, your time increased. You’ve to understand. In this scenario, you must download more code on the client side.
Earlier, a small, good HTML page used to come. Now you’ve to download so much JavaScript and React too. You have to download 10, 20, 50k libraries. So time to interactivity, which is called TTI, increased a lot.
See how easily you have understood the 4, 5, and 10 concepts. Watch this video 2, 3 times! When you watch this video 2, or 3 times, talk about it, and try explaining it to someone, your understanding of web development will be excellent.
And when you’re watching so many times, comment, Like, share, subscribe! So let’s move forward. To solve these issues, Next.JS came to the field. It asked, can we have the best of both worlds? Can we have it on the client side? Can we have the whole SPA experience? This means only React can control the whole page. Right? If React controls the whole page, only you can give SPA experience.
But at the same time, can we, from server & DB, only server-side, make the first page and give it? Can we make the page and give it? So React said, Yes, we made it to make HTML on the server.
React has this functionality for a long time! It has been there for a long time. Render to HTML, render to string. You can do it quickly.
Then, Next JS says it was challenging to set up for others, but we did it easily. So this thing, you call it SSR means Server Side Rendering! Let’s revise once. What does server-side rendering mean? It simply means what we used to do before, what we were doing here, Server & database made an HTML page, & then interactivity happened through JQuery.
Only this changed; instead of that, the same things are happening. Only interactivity is happening via React here on the client side. What is the benefit of this? Your time to interactivity increased a lot. You don’t have to do that now because you’ve entire HTML made.
So you can reach this page directly. So the entire game has shortened, and after that, React takes over. This is called a server-side rendered page, in the sense of Next. JS.
Because earlier pages were also Server side rendered, but SSR when we talk about React, when we talk about Next.JS, so that is this! So it was a long article to explain what server-side rendering is.
