Prerendering Strategies in Next.js | NextJs Tutorial for Beginners #21
Prerendering Strategies in Next.js | NextJs Tutorial for Beginners #21
All the source code and other material will be uploaded on https://codewithharry.com as and when available!
►Checkout my English channel here: / @programmingwithharry
►Instagram: www.instagram.com/codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 by CodeWithHarry
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr] - • Python Programming Course in Hindi (A…
Python[1 Hr] - • Learn Python In Hindi In One Video - …
Python[2 Hr] - • Python Tutorial In Hindi 🔥
Python[15 Min] - • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr] - • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr] - • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min] - • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr] - • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr] - • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr] - • How To Make a WordPress Website | Wor…
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial using Python an…
MongoDB[2 Hr] - • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr] - • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr] - • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr] - • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React - • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java - • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django - • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo - • Data Structures and Algorithms Course…
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular) - https://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
Twitter - https://twitter.com/Haris_Is_Here
Comment “#HarryBhai” if you read this 😉😉
Content
0 -> todays topic is pre- rendering, in this topic we'll talk about how it works in next.js
5 -> but what is this pre-rendering
6.669 -> lets understand this first
7.98 -> when you visit a typical web website
11.28 -> then html, css and java script
13.857 -> are being shipped to you but
15.65 -> in html all the contents of the books are not there
19.258 -> using react.js what does next.js does
23.394 -> it sends by default pre-rendered pages by which your
28.081 -> SEO is maintained in your website
30.845 -> the social media bots
32.712 -> and along with the search engines
35.382 -> they can get to know the content and know that your website
38.956 -> what is it about
40.59 -> a react application is rendered with the help of java script which means
44.754 -> that if for some reason java script doesn't get executed
49.357 -> then the content of the page doesn't get showed
51.831 -> this is a big problem and to solve this next.js uses pre - rendering
56.222 -> two primary strategies
58.453 -> first is service rendering
60.266 -> and the second one is static sign generation
62.412 -> in service site rendering what happens is
64.831 -> your server
66.131 -> send it to the client
67.865 -> all the data and
69.277 -> and your client
70.782 -> as it talks to the server along with that server will send the data to client
75.618 -> in static site generation the complete site of the next.js
79.826 -> only the bundle of its front end
81.377 -> converts into a static site
84.005 -> after doing this with the help of CDN or with the help of such a service
90.22 -> which can send the pages real fast
92.934 -> you can use it
94.705 -> and with the help of that
96.209 -> and do the delivery of the web pages in a speed
99.286 -> now if you feel all these things confusing
101.586 -> so please be into this course i will tell you call these things step by step
105.218 -> how to do server site rendering
107.197 -> how to do static site generation
109.163 -> and what more mislaneous strategies are there in next.js
112.189 -> we'll learn everything in this video
114.136 -> what will have to be used and when everything i will tell you in brief
117.25 -> you should use static site generate when
119.637 -> you are using blogs and all
121.639 -> content of the blogs don't change frequently
124.441 -> that is why there
125.471 -> static site generation can be used but those pages
128.593 -> where frequently the content changes
130.677 -> just like the feed of your facebook
132.82 -> or feed of someone's social media
135.263 -> or feed of your twitter
136.929 -> or the data which is getting updated live for example live news
140.807 -> there you will
142.299 -> have to use server site rendering
144.764 -> you cannot set it statically because the data is being changed live
148.287 -> we will see how these things work
151.349 -> lets go to computer screen and explore the use
154.235 ->
163.98 -> so the time has come where we learn pre- rendering
166.206 -> i will write yarn dev here and start the work quickly
169.462 -> and will tell you about pre-rendering
172.438 -> see what happens assume there is a blog
175.682 -> like code with harry.com or any other blog
178.531 -> will write blog only this will only come
181.273 -> any of the blog will come assume this is the blog
184.438 -> now i will open a random post
188.301 -> how to write a blog step by step
190.43 -> it is a blog where i opened a post
192.581 -> if i am a human
194.045 -> then i can read this article what is a blog post, a blog post is any article and if i am a bot`
199.137 -> i wont read this
201.514 -> if i am a bot i will read the page source
205.607 -> if i get to see that blogging may mean different things depending on your meesh
210.013 -> lets see possible that this thing comes from java script
213.97 -> maybe an api populates it
216.702 -> and possible that
219.759 -> it is already a part of html
221.808 -> yes it is a part of html
224.214 -> its is a paragraph tag and if i am a bot
226.736 -> by fetching the html
228.634 -> here talk is not about execution of java script
234.23 -> after watching html
237.413 -> understanding the content of html
239.283 -> i can tell you what is written in the blog
242.361 -> is it better or i should run the java script
245.9 -> if i run java script what will be the disadvantages
248.343 -> if your api is down for any reason
251.865 -> assume if someone reloaded the page
255.699 -> or loaded for the first then what will happen
258.011 ->
258.834 -> if the api is down then nothing will be seen
261.345 -> because your data is coming from api
263.342 -> so if the api is down they nothing will be seen
265.963 -> so this is a big downside
268.287 -> another thing is
269.651 -> bot, doesn't mean a bad thing
274.347 -> bot can be a good thing
276.467 -> bot can be a google bot
278.691 -> it can be a social media bot
280.945 -> what do you think Facebook, LinkedIn
283.38 -> or twitter
285.38 -> don't do it manually, if any link text you might have on WhatsApp, when you send something what is there under the link
292.71 -> you can see a shadow of it when you paste it
295.886 -> when you paste something on it
299.408 -> or when you post a link
301.228 -> under it an image is populated
303.528 -> and the content gets populated too
305.552 -> so the bot
308.4 -> will read the page source, so
312.357 -> if can see the content so it is good
314.949 -> bot won't do that much hard work, it is possible but
319.507 -> in most cases when the basic bot can read your content when
323.616 -> when your content is visible without executing java script
326.689 -> most of the bots are those who read the content and bring them
331.042 -> they don't wait for the execution of java script
333.401 -> they don't have to read only your websites they have to read many websites too
337.322 -> here the bot of google
341.043 -> which very easily
343.18 -> like this is the content it will show the content if you paste a link
346.927 -> what will be the reason how will it show
348.858 -> reading the page source it will be able to show
353.162 -> so we have to ensure a thing from next.js
355.446 -> that our content should be in html
357.829 -> so in hunting coder i will turn the dark theme on
360.69 -> it is not with hunting coder, if i open box of flask and right click and go to view page source
366.401 -> and here i will write flask
368.956 -> flask is not a word in my content
371.412 -> so think if i wanna rank my website
374.209 -> and google will see in my source code
376.538 -> flask is not there
379.866 -> it won't run the java script
382.69 -> if the java script doesn't run then the blog is not about the flask
387.112 -> flask doesn't seem here
390.945 -> nor does java script
392.833 -> but in my content java script is present
395.827 -> so what will we do
398.064 -> will use pre-rendering so that the content will show in page source
403.44 -> so it can be done in two ways
405.188 -> if you see in my source code
407.463 -> and if i take you to my
410.598 -> blog post page you will see that with the help of java script will fetch the content with API
416.015 -> if i want to do this already
420.163 -> so i will have to hard coat the pages in the blog
423.011 -> i have 3 blogs but in blog post i have only 1 content
427.923 -> the component takes care of everything and takes the slug and
433.831 -> the blogs written by us
435.868 -> populate inside the blog data
438.762 ->
439.294 -> this is understandable
441.135 -> if i run it directly then java script will be executed
445.846 -> what does next.js provides us
448.376 -> it provides us two types of pre-rendering strategies
451.976 -> static site generation and server site rendering
457.777 -> if i am talking about server site rendering
460.292 -> and understand both the thing so that
463.13 -> because if you don't understand it won't have a meaning let me remove dark mode
469.734 -> by default it is a dark mode of google
471.595 -> in server site rendering
473.668 -> the html files of yours that in server
476.764 -> will get hydrate which means
478.785 -> if it seems like where there is not java script
482.447 -> then it will be seemed as in which
484.772 -> content is there it is seen
488.511 -> this is a page hydrated
490.554 -> if in server you will generate an html file
496.193 -> will send to client in which the content
498.371 -> is already there and you won't have to do this manually
501.268 -> which is already in next.js
504.237 -> the feature and energy of working
507.816 -> its name is server site rendering
510.111 -> a page will be generated from your page which will be seo friendly
515.079 -> and i the source code of which there is name of content
517.869 -> after that it will be sent to client
519.772 -> so that the client won't have to do the hard work by running java script
523.203 -> you can do it and the java script will run
526.727 -> but to populate the content
529.11 -> java script won't run and to populate the content
532.449 -> so the responsibility is of next.js
536.207 -> so this should be understood
538.27 -> so if i go here
539.726 -> and show you here
540.954 -> this page here all the content is there
543.869 -> in source coder not in hunting coder
546.787 -> so this thing can provide me server site rendering
551.246 -> if i change the content in server site rendering
554.377 -> if i change the point end in back end assume that
558.138 -> i changed the content
559.9 -> assume if in the place of java script put flask, flask is often abbreviated as js
564.942 -> if i write and change the content, so will the changes reflect
571.026 -> will the new user fetch
572.751 -> will obviously change because my
574.729 -> my content is getting genrated here
578.061 ->
578.83 -> is getting generated in my server
580.262 -> what is server side rendering
582.625 -> i am a client
584.075 -> and this is a server
587.842 -> i am a client and this is a server
590.285 -> what does server says
592.173 -> it saves that client doesn't have to populate the content i am there for a reason
597.214 -> i will give you the html which will have the content already
601.7 -> it is server site generation
603.423 -> now client will ask the server how will you get the content
605.824 -> server will tell here at the end i will
608.076 -> i will fetch from the data base i have the responsibility
611.957 -> picking up the data rom API and
614.263 -> hydrating the page
617.096 -> client gets happy
619.39 -> it is server site generation
621.219 -> on the fly the pages are generation as the client requests
626.261 -> and as one request comes server
628.162 -> server hydrates the data and sends it back
631.96 -> and quickly all the data
634.022 -> flask.jsn reads
636.823 -> if java script the it reads this file
638.51 -> reads it like that and do
641.055 -> sends to clients so all the work is in real time
643.687 -> now static site generation what is it
648.613 -> we talked about server site rendering
651.277 -> if i talk about it
653.215 -> see
654.656 -> it has the ability to convert html files on the server
659.029 -> into a fully rendered html page for the client
661.533 -> i would like to open page of next,js
663.131 -> will open next.js
664.911 -> in server site rendering two types of pre-rendering has been talked about
670.038 -> static site generation
671.922 -> and server site rendering
673.413 -> we talked about server site rendering now we have to understand static site generation
676.568 -> what is happening in this
678.895 -> server says that
680.682 -> that i will give a complete generated site to you
685.282 -> and then i will go no need of me
688.862 -> can do it in your development environment
691.014 -> basically in the hunting code what will i do
693.312 -> will convert this site into static site
696.547 -> server will not be there
697.998 -> obviously if you wanna run api you have to run the server too
701.738 -> front ends topic is going here
703.111 -> will be a bundle of front end
704.977 -> and now with the help of that
708.498 -> can generate a static site
710.803 -> static site means
714.051 -> assume that an image of yours
716.538 -> is a static asset
717.831 -> is not getting updated is not like that if logo of next.js open image in new tab
722.702 -> there is not the option here
724.245 -> if i do open image in new tab to any image
728.76 -> and not like that HubSpot is written
731.186 -> tomorrow it will change into something else
733.05 -> if this file is on server then this is it
736.154 -> this will catch in my browser
738.116 -> it can be cached though cdn
740.784 -> and the delivery of static site
742.552 -> is very fast
743.741 -> so if i generated static file, for every page generated.html file
749.285 ->
750.578 -> so a static site will be generated for my complete site
754.147 -> i will deploy a complete static site of me
757.534 -> give me an answer and which is
760.909 -> that if i changed a blog of hunting coder
765.695 -> i did flask here
767.349 -> what will happen
768.608 -> what static site which is already deployed
771.357 -> not new the one which is already deployed
774.186 -> do we have to get to see the changes there
777.707 -> the answer is no, why?
780.025 -> because when we generated the static site
782.918 -> then all the content will freeze
784.877 -> the content which is available will get the generated static site
787.815 -> and when i will deploy static file
790.411 -> won't check the data bases of hunting coder
794.041 -> what i am putting here or not
796.561 -> the data there got freeze
798.925 -> until i redeploy it
802.488 -> till then the static file won't change
804.604 -> the major drawback of static site generation
808.884 -> if you generate a static site
810.994 -> after that you cannot change it
814.5 -> until you cannot redeploy it
816.854 -> incremental static site generation is also there
820.284 -> till then understand these are two types of p[re-rendering strategies
824.17 -> in next js
825.038 -> what are they doing
827.438 -> server site rendering on every site
830.105 -> generates an html [page which has its contents
833 -> in static site generation
835.122 -> already of the complete site
837.235 -> our static site is being generated already
840.481 -> and now will deploy it somewhere
843.123 -> assume if i generated a static site for you
845.936 -> i sent the zip file to your email
850.311 -> now i am changing the hunting coder will improve it
854.632 -> even if you deploy the package it wont update automatically
859.008 -> won't update because here
861.384 -> i will make changes and it won't relate from the static site
865.608 -> i hope you understand what i am talking about
868.04 -> in upcoming videos this will get more cleared
870.634 -> if none of this is being understandable to you
877.477 -> until you practice it won't
880.422 -> theory and practical are really different
884.609 -> so i prefer showing it to you all
888.742 -> in next videos we will see
890.903 -> how these strategies are being used
893.45 -> we'll use the strategies one by one
895.387 -> we'll see server site rendering
897.562 -> and then static site generation
900.525 -> and see how this is done
902.472 -> so please do access playlist of next.js
905.853 -> thank you so much guys for watching this video
908.245 -> and i will see you next time
Source: https://www.youtube.com/watch?v=rabU9vZBoTg