Flipkart TEARDOWN with NEXT.JS - for BEGINNERS | Tanay Pratap Hindi
Flipkart TEARDOWN with NEXT.JS - for BEGINNERS | Tanay Pratap Hindi
In this video, we delve into the workings of Next.js and its significance in app development. Discover how Next.js empowers beginners to create impressive e-commerce apps. Learn about its features, benefits, and why it matters for your projects.
Join #TeamTanay Discord Community: https://bit.ly/team-tanay
#nextjsexplained #ecommerceappdevelopment #tanaypratap
------------------------------------------------------------------------------------------------------
Like, Share, and Subscribe for more!
Follow me on my other social media handles for all updates, events, and live sessions-
Instagram: https://www.instagram.com/tanaypratap/
Facebook: https://www.facebook.com/tanayofficial
LinkedIn: https://www.linkedin.com/in/tanaypratap/
Twitter: https://twitter.com/tanaypratap
------------------------------------------------------------------------------------------------------------------
What’s my story? An engineer, in love with his job, started teaching on the side. Got lucky. Impacted 1000s of lives. Had to finally leave his job to increase the impact surface area. Raised $5M funding to fix education. Is learning day and day about startups and building a valuable product.
How is it going? A decade of engineering helps in systems thinking and product building. Learning about Strategy, Marketing, People Management, and Finance on the go.
What am I building? Today, 25 million Indians prepare for government job entrance exams. They do it for years together. The probability of success is less than 1% but they still do it. Why? For the lack of a structured alternative to launch their white-collar career. I am building Invact to bridge this gap.
How? Follow me to know, it’s a long story. I am telling it in parts every day.
Content
0 -> There is huge commotion that
1.368 -> a big change in React ecosystem is coming,
3.67 -> and there are new React Server Components coming,
6.473 -> and there is a lot of interest towards Next.js and Remix.
10.076 -> These frameworks have become so popular that
13.58 -> on the official website of React, it is said that
16.583 -> either you use Next.js or Remix or Gatsby for the project.
20.587 -> So it is important for us to understand what is happening.
22.689 -> See, we understand where journey of web development started!
25.592 -> Any webapp or web page has a very simple thing called template.
31.398 -> What is a template?
32.899 -> The simplest example of a template is a wedding card
36.202 -> If there has been a marriage at your home,
38.271 -> then you get a wedding card.
39.572 -> What is written in the card?
41.074 -> Shri, Smt, this, that!
44.377 -> The address is written below.
45.879 -> And what do you fill? You write their address.
48.381 -> Any form you fill, it is already given space.
51.985 -> What is that?
53.186 -> It is a template.
54.187 -> It is written that show the information in this way,
56.689 -> because people would like to read it in this way.
58.191 -> When we see this thing as a web,
60.794 -> let us open any website and see.
63.196 -> So if we look at the Flipkart website for a second,
65.398 -> so what is this?
68.601 -> This is a template.
70.77 -> You can see that whatever information is in it,
74.574 -> is being repeated over and over again, here and here.
77.877 -> How do you see it?
79.179 -> See, this is the name of the phone.
81.381 -> This is the same everywhere. Here too! Then this is its rating.
86.386 -> Right?
87.787 -> Then this is its price. You will see this everywhere. Different prices!
93.393 -> Then you see this is the image of the phone.
95.795 -> See this is the phone details.
97.597 -> These are also made in such a way that,
99.299 -> the details will come in the list, right?
103.036 -> Details are coming in the list. See this! So what is all this?
106.573 -> This is a string. You can also see that there is a string here.
110.276 -> This thing with money is an integer.
113.98 -> Do you know why this is an integer?
115.982 -> Why am I saying this is an integer?
117.383 -> Because here we can control it from this place.
121.488 -> And here this is the pricing of the integer.
123.99 -> That's why you can control it.
125.391 -> So this will be the integer value. This is an image. Right?
129.395 -> We know this thing! How much is this rating? This is your rating.
134 -> This piece is an integer. Again I will tell you why it is an integer?
137.57 -> See, because you can control it from here.
141.074 -> So if you learn to break the website,
143.576 -> then you will understand that it has nothing!
147.78 -> If I design one card well, you seeing it?
154.087 -> If I designed this card well,
156.689 -> and I learnt to run it on repeat.
160.393 -> So what else do I need? I don't need anything!
162.395 -> So once we understand this thing a little differently that
164.397 -> what is happening?
165.598 -> It is happening that there is an image in a card.
170.103 -> There is some text, in big size, which is the name of the card.
172.772 -> There is some rating. There is some other text,
175.074 -> which has many text lines.
177.577 -> There is a price. Right?
179.279 -> So see this is a template!
183.082 -> And you see this same template is repeated!
186.085 -> So this thing becomes multiple times. How does it repeat?
190.19 -> Something happens gets done by the for loop.
193.393 -> Basically it will happen in any kind of loop.
195.094 -> You can call it a map in JavaScript. Do anything but it will repeat!
198.598 -> See something more interesting. See something very interesting!
201.601 -> I will show you the website once again!
203.603 -> We will go back to the Flipkart website.
205.572 -> See we will show you this thing again! How the template works?
209.075 -> We saw Poco.
210.577 -> Now we will see something else instead of POCO.
213.58 -> We will go to TV and appliances, so see we are watching Mi TV!
217.584 -> See the same thing is visible in this! Are your seeing this?
219.652 -> See the same thing is visible in this. This is
222.889 -> There is an image here! Same to same! Here is the name.
226.092 -> Here is the rating. Here are the details.
229.095 -> Here is the price. See?
231.598 -> Exactly the same thing. See here Flipkart Assured! See?
236.603 -> So once I made a template.
239.072 -> It is very important to understand,
241.074 -> Once we make a template,
243.576 -> we are using it on every product listing page,
246.579 -> and we are using it for every product.
249.082 -> And if you see this on the product page,
251.584 -> then all the product pages of Flipkart will be the same!
255.088 -> So we are understanding that it is all about templates,
258.591 -> and what is the whole game?
260.093 -> So when templates were used before,
262.095 -> then such templates were used,
264.097 -> in which you used to put data in the middle.
265.598 -> Now where does this data stay?
266.599 -> We talked about it before,
268.601 -> that data stays in the database. Right?
272.572 -> How does data stay in the database?
273.573 -> Data in the database is such that,
274.574 -> there will be a long big table,
276.576 -> and it will be written that,
279.078 -> this phone Poco has its rating is 4.1.
283.583 -> Its image URL is this. Its details are this. Its Flipkart Assured.
292.558 -> Its price is 5999. It will be written like this.
298.097 -> And the same will be filled in the same way.
299.599 -> More details will be there! Do you understand this?
303.102 -> That data stays in the database like this! And what does it do?
308.074 -> There is an engine,
309.075 -> which takes this data and puts it in this template.
313.579 -> So what will it do?
315.081 -> It will say that, see, put the image URL here. Put the details here!
322.588 -> Put the Flipkart Assured here. Put the price here.
327.093 -> And put the name here. This is what happens!
331.097 -> Data is put in the template. Do you understand this?
335.101 -> Now I will explain the history of putting this,
338.471 -> putting data into template. What used to happen before?
340.573 -> This template and this data
346.913 -> In the earlier times, 10 years ago, 5 years ago,
351.084 -> This data used to be in the DB,
353.886 -> and this template used to be on the server.
356.456 -> So this is your server, and this is your database!
362.628 -> And this whole work used to be done on the server.
365.098 -> This was called server side. Server side,
369.102 -> means the whole work is done on the server,
371.804 -> and here by combining these two,
374.073 -> by combining the template and data, an HTML page was created.
378.211 -> HTML page was created. This is what Ruby used to do,
383.082 -> Django used to do, PHP used to do.
386.085 -> So PHP, Ruby, Django, what did they do?
389.088 -> They used to say give me a template,
393.126 -> and give me a DB,
395.094 -> ao I will combine both and give you an HTML page.
398.097 -> Like Subhash Chandra Bose used to say
400.099 -> Give me blood, I’ll give you freedom. In that way, they used to say
402.101 -> give me a template and DB, and I will give you a page.
404.47 -> And where did this page used to come from?
406.072 -> This page used to come to the client.
408.474 -> This is your client.
411.677 -> So this page used to appear in this.
414.08 -> Do you understand this? This was the story before!
417.417 -> Then what happened in between?
418.518 -> Then what happened a few years ago
420.086 -> What we have talked about, what happened a few years ago,
422.789 -> your game has changed a bit.
426.626 -> Now on the server, on the server side, there is no template!
434.3 -> Data remains! Okay, data remains.
437.537 -> So where does the template come?
439.071 -> The template is sent to the client, so this is the client side.
445.077 -> And the template came here. How did the template come?
448.648 -> In JavaScript. So what we were seeing in Ruby,
452.485 -> what we were seeing in Django, what we were seeing in PHP,
455.087 -> Instead of that, JavaScript template came here.
458.558 -> Who brought this template here?
460.092 -> React
462.094 -> Who else brought it?
463.095 -> Vue
464.096 -> Who else brought it?
465.097 -> Angular
466.098 -> They said, look brother, we’ll make the whole page in JavaScript.
471.938 -> Okay, let's go back for once again!
474.674 -> When it used to be here, there used to be interactivity in the page.
478.077 -> It was not like that HTML page did not have JavaScript earlier.
481.08 -> JavaScript was there earlier, client side JavaScript used to be there.
484.083 -> But it was lesser. So client side JavaScript used to be like this,
487.086 -> You filled the form, so before submitting,
490.089 -> check whether the required fields have been added or not,
492.091 -> whether it is properly added or not. They used to hide small shows.
495.094 -> How did they do it?
496.095 -> Through jQuery!
499.098 -> Okay, so jQuery used to run JavaScript on the client side,
502.101 -> but not full fledged apps.
504.103 -> HTML page used to be made from the server,
506.072 -> and because it was made from the server,
508.074 -> that's why you used to get that blank white canvas in the middle.
512.578 -> But when SPA came, when SPA came,
516.082 -> What is SPA? We have talked about it many times.
518.084 -> Single Page Application
523.089 -> When SPA came, whole page started to be made on the client side.
527.093 -> What does client side mean?
529.095 -> This means, that on your phone, on your tablet, on your laptop,
533.099 -> data is being added in the entire template.
536.869 -> We have understood to add data in the template.
538.437 -> But earlier what used to be on the server,
539.572 -> started to be on the client and same thing was there on the client.
542.942 -> JSX templates are like this and where does the data come from?
547.847 -> It comes from the server through API. Okay, so the server,
551.083 -> this server has a server. There is a DB.
555.721 -> Again we have talked about this first and data comes through API.
559.392 -> So what happens is your page is loaded first.
563.062 -> It remains empty. Then data comes from the server.
566.632 -> That is data comes from API, then this page is created.
569.869 -> And you interact with it. So entire page is created on client side.
573.105 -> It is being created on React, not on the server.
575.541 -> You have understood this much. What were the problems of this?
578.878 -> What were the issues of this?
580.813 -> The issues were that SEO could not be done,
584.083 -> because the page is not being created on the server.
585.751 -> So SEO becomes difficult. What were the issues of this?
588.654 -> Takes more time, time to interact increased.
593.059 -> Why did it increase?
594.093 -> Because when the page was created on the server,
596.295 -> It was created quickly. Now on client, first JavaScript comes,
600.099 -> first JavaScript comes on client, first download happens.
603.269 -> Then compile happens. When it’s compiled, it says I’ve compiled.
608.374 -> Now I will call API. API calls! Then API takes time to get data.
614.08 -> Then data comes. When data comes from API & JavaScript comes,
619.518 -> then the page is created, then interactivity starts.
626.092 -> First your time increased. You’ve to understand, in this scenario
632.098 -> you have to download more code on client side.
636.102 -> Earlier a small, good HTML page used to come.
638.27 -> Now you’ve to download so much JavaScript, React too.
642.074 -> You have to download 10, 20, 50k libraries. So time to interactivity,
646.846 -> which is called TTI, it increased a lot.
650.082 -> See how easily you have understood 4, 5, 10 concepts.
653.552 -> Watch this video 2, 3 times!
655.955 -> When you watch this video 2, 3 times and talk about it,
659.625 -> and try explaining it to someone, then your own understanding,
663.362 -> towards web development will be very good.
665.531 -> And when you’re watching so many times, drop a comment,
668.434 -> Like, share, subscribe!
670.803 -> So let's move forward
672.071 -> To solve these issues, Next.JS came to the field.
676.075 -> It asked, can we have best of both worlds?
680.079 -> Can we have on the client side?
683.482 -> Can we have the full SPA experience?
687.219 -> Means only React can control the whole page.
690.322 -> Right? If React will control the whole page,
692.658 -> then only you can give SPA experience. But at the same time,
697.229 -> can we from server & DB, only server side,
702.902 -> can we make the first page and give it?
706.072 -> Can we make the page and give it?
713.612 -> So React said, Yes, we made it, such that we can
717.55 -> make HTML on the server.
720.086 -> React has this functionality for a long time!
722.588 -> It has been there for a long time. Render to HTML, render to string
726.625 -> You can do it easily. Then Next JS says,
730.096 -> it was very difficult to set up for others, we do it easily.
734.467 -> So this thing, you call it SSR means Server Side Rendering!
744.877 -> Let's revise once, what does server side rendering mean?
748.614 -> It simply means what we used to do before,
751.45 -> what we were doing here, Server & database made an HTML page,
756.922 -> & then interactivity happened through JQuery.
759.558 -> Only this changed instead of that, same things are happening.
764.096 -> Only interactivity is happening via React here on the client side.
766.465 -> What is the benefit of this?
768.1 -> Your time to interactivity which increased a lot,
772.505 -> you don't have to do that now because you’ve entire HTML made.
776.075 -> So you can reach this page directly. So entire game has shortened,
782.081 -> and after that React takes over.
785.518 -> This is called server side rendered page,
788.087 -> in the sense of Next.JS.
789.355 -> Because earlier pages were also Server side rendered, but
793.192 -> SSR when we talk about React, when we talk about Next.JS,
796.762 -> so that is this!
798.03 -> So it was a long video, just to explain what is server side rendering.
804.103 -> What is template?
805.237 -> If you understood then subscribe like, don't forget at all,
809.542 -> because now in part 2 video,
811.61 -> I’ll have to explain what is server side generation?
814.079 -> And how is it different from server side rendering?
816.515 -> And then what is the difference between Next.JS and Gatsby?
819.518 -> So that video is also coming soon! Will explain in same fashion!
822.822 -> If you enjoyed it,
824.089 -> then please write loads of love in the comment!
Source: https://www.youtube.com/watch?v=DM0aRZ_MJjY