The explanations in your videos always have a conceptual appeal, and this one was no different. Thanks a lot Max for creating such insightful content and I am looking forward to more in the future.
I at least got the gist of it but man, i am still lost. is there is Firefox extension which shows certain websites if they are static or dynamic? Or, can someone give me an example of any popular website which are static or dynamic
Under which team do react and similar frameworks work? Static or dynamic? Is it possible to use react to make a static website more "dynamic" (fetch data from files and similar)?
A quick question, if I wanted a static page to somehow be changed by each user through a website software that changes the code (in a more simple way of course) to make the page look different for them, would it be possible to have slight personalization of each individual page (let's say each page is created individually for that user, there are multiple pages so it is not only one page)? thanks sm for the info. by the way, it was very informative and helpful
Thanks this was a great video. The only thing I found a little odd was saying static website security is more complex. Everything else I have read says that dynamic websites are more vulnerable.
I have no experience on servers. Still, I think what they mean by static is websites without JS, JavaScript. That is, just an unchanging page without scripts. Just HTML and CSS. Which is not what what he meant in the video by static. I don't know which definition is correct. The definition he used in the video seems to be the more widely accepted one. And yes, dynamic pages do seem more secure to me since scripts are run in the server, instead of in user side of things. Always good to keep your systems safe and trust them instead of external agents. Of course, this is only true if you have good code sanitization on your server.
Are Serverless applications also the same as Static Applications that consume endpoints from a REST API and do not need server-side code? (11:00 - 11:15)
Personally, I prefere static pages. You can have free or very very cheap (I still prefer free) hosting, because all It has to do is to serve a couple static files. You can cache your static files in CDN (like free Cloudflare) and you site will be blazing fast, like 300ms to load with almost zero utilization on your hosting server. And to make it even better - you can use service worker to install all of your page in browser on first visit. Now your site can load in under 50ms, and even work offline. To summary: with static site your site can load in 300ms for first, and 50ms for any next visit, with almost zero utilization on server, which itself can be the cheapset and the most basic server you can find.
How can I implement this in my website? I have a calendar section,it’s a column of 5 events that I’d like to populate those fields, the date, name of the event, and a short description.
Excellent video! I like how you went beyond simple definitions by showing a demo and comparing the benefits of each approach. Your explanations were also very clear and concise.
Im new to this- very good info. How would i prepare the design for page layout in order to accomodate for a dynamic web app? Would the design be the same as my static site? What wouldthe back end developer need from t he design person?
I don't understand you at the end of the video, If I'm building a static web page that only use html, css and javascript, how am I going to serve my web page with an API or something ? shouldn't I need something else to fetch this data ?
Really great video thank you! Is this a redefinition of SPA/MPA because static/dynamic can be used together in one site? Curious to hear your thoughts. Tracking this language game is truly difficult if working solo.
It's not a redefinition. Usually dynamic pages are used in multi page applications, but they tend to include some static assets (eg. javascript, css, images, ...). SPA/MPA is more about the look and feel of the website (does it reload the page if i click somewhere), while static/dynamic is about the way the page gets served to the user.
I still don't get it. OK so I once made a blogging website which had blog_Structure HTML file but had not content as it would be fetched from an API depending on the blog selected to read. The rest of the HTML file were pretty much constant. Which type of website is this, considering the blog_structure?
At what point he said: In static websites, you can show a loading spinner before the data comes, which suggests that the data can fetched from a database just like your blogs. So, the fact that data is being fetched from a database on a website doesn't make the website dynamic.
Alright, so then... I guess another big plus for static pages would be caching, right? Cant cache something that constantly changes with each request. Can cache something that never changes during request time, but does at run-time, adjusting its content by fetching data from left and right via js... In that regard, what is the best-practice here? Say I have a "weak" server that can only handle a few thousand requests / sec. And lets say it gets super popular and has visits/requests > 1mil or more A SEC, even if that sounds ludicrous.. In that case, it would be better to use static webpages with a backend that provides REST API endpoints to provide the data during runtime, as you have also said. The browser would fetch small chunks of data, lets say user/profile data, which is comparatively less (in bytes) than say the entire dynamic webpage that contains the user/profile data. Let me throw out some numbers here... say the static page itself is 100kb big and the data requested by it via js -> REST API backend is just 1kb. If it were a dynamic page, every request would require a data transfer of (100kb + 1kb) x 1 mil. visitors / sec. But if its a static page, it never requests the 100kb page again because of the caching mechanism of the browser. It only requests the user data, which is 1kb x 1 mil visitors / sec. Did I get it right? If all of what I said is conceptually right, why the heck would anyone ever use "dynamic" pages? Is it because of comfort reasons, like there existing more solutions, frameworks, best-practices etc for dynamic pages? I've been thinking about this and my stack would have been initially: Java Spring Backend with the templating engine thymeleaf, that dynamically creates the pages. But it seems that's a stupid idea considering what I just wrote in case I am aiming to write sth where I anticipate lots of users, popularity etc. It would be better to use Java Spring Backend to merely provide the REST API endpoints and write all the code statically, via js, fetching all the data during runtime, etc. etc. Edit: Lets say I could not anticipate that it would get so popular, lets say I only considered 100-200 visitors / sec and designed the entire system with that in mind. So I went with a dynamic page. How hard would it be later on when it skyrockets in popularity, to make a switch in order to optimize all of that and reduce the bandwidth to give the server a break? Could you please give your thoughts on all of what I wrote? Thanks. Great video btw.!
I think you're right on the mark. I've been looking into all the new options and feel like Gatsby+headless CMS like Strapi + GraphQL is the way to go. But I'm still diving into all the new info. You should watch this video from Google I/O th-cam.com/video/7_2CJs_VZk4/w-d-xo.html but Im not completely sold on AMP simply because everything gets rendered directly from google instead of your own server. So much so that your site's url doesn't even come up in the address bar.
Is this not just the difference between server side rendering and client side rendering? Static website just means unchanged, dynamic means different content can be shown. Dynamic website does not mean SSR. A website using CSR can still be dynamic.
No. Dynamic means the contents of one and the same web page changes every time you make a request (like click on a button. This is usually executed by a function in a chosen program). Static means there is no change. But you can assign a hyperlink in a static web page that returns another static web page (or a file such as jpeg or pdf) when you click on it. That's the only change a static website can ever have.
Danke for another great video! Speaking of static websites, I was hoping if you can make a tutorial on any one of the static site generators like Jekyll, Gatsby (React JS) or Sculpin?
Ah, that won't happen, sorry. I'm not a fan of Ruby and I'm also not a fan of learning something just to quickly create a tutorial on. The things I teach are things I worked with quite a bit :)
We understand you cannot learn and master everything out there and we don't like to burden you with demand after demand. Since you are an expertise in JS and PHP ignore Jekyll and you can create one on Gatsby in the near future. :) Danke!
the static way is good when you have a small website with less content and not so much functions to run. javascript or jquery can do the job then. but if you have a bug website with more function i like the dynamic way then.
php for personal/individual/self maintained projects. node for team projects because php is faster to develop. and node is easier to maintain & better performance
I'd say that you should use WordPress to build a high quality site, but convert it to be static so that it is less resource intensive and is easier to host.
*Security is more complex with static, and easier with dynamic?* (@7:46 ) Wrong. Sorry. But so wrong - static basically only has 'man in the middle' attack exposure, and that's effectively closed off by https.
That's not my point. My point is that it's easy for beginners to expose information in their static (JS) code that can be abused. That is something that you have to get right. Obviously, you have to get server-side security right, too but it's easier in that you can't expose confidential information to users that easily.
Awesome that you replied. Big fan - happy, helpful, easy to follow tutes! Okay. So I think I understand you. You mean it is easier to 'protect confidential information' with a dynamic setup. I agree. I don't think you can even do this properly with a static setup - not really. That applies IF there is confidential information to protect. I think your viewers might wrongly think you mean static is more open to hacking, attacks, etc - when it is much more secure in this sense. Just my 2 cents - keep up the good works.
dynamic website = individual response (different files) static website = always same files a dynamic website needs an overhead to determine what individual code gets send to you ... a static website needs no overhead since the files itself are always the same ....can still be dynamic by making client side resquest through the files itself . Basicly the files asking for more files ...
@@MedyGames So does that mean.. a static website that renders all on the client side is static? BUT then what if your game canvas is fixed, but the data on the players position is constantly sent via a server. I said POSITION is SENT, not rendered. So, in that case if the position is received by the client and then rendered on the canvas by the browser's local JS... is that still a static? would you require static hosting for that?
This is out of the scope of this video, but why do you charge so little for your courses? I took your AWS course months ago and it has helped me a bunch, would easily of paid $50+ on it. I see some similarly sized instructors directing their YT traffic to a teachable course for ~$59 instead of just Udemy at $10 - $15, while still having Udemy courses for native Udemy members to find. Just my two cents as someone who actively consumes courses, your teaching style and knowledge is better than a vast majority of the courses out there, and should be worth more.
First I want to thank you for your amazing feedback Alexzander! At the moment we are happy with Udemy as a platform, therefore we publish our courses there. We are aware of the pricing of course and it's honestly great to read comments like yours who are actually aware of the fact that $10-$15 for a course (including Q&A support) are actually not that much money for what you get - at least in my opinion.
The explanations in your videos always have a conceptual appeal, and this one was no different. Thanks a lot Max for creating such insightful content and I am looking forward to more in the future.
Thanks a lot for sharing this wonderful feedback Prithul, this honestly means a lot to me!
0:15 ❤
youtube.com/@youtube 0:15 creators?si=dBzkmc4puCCF6oEu
Thanks for explaining this. You covered several aspects in such a short time.
I realize I am pretty randomly asking but does anyone know of a good place to stream newly released series online?
@Ramon Ridge I would suggest Flixzone. You can find it by googling :)
@Giovanni Gannon Yup, been using flixzone for since april myself :)
@Giovanni Gannon Thank you, I signed up and it seems like a nice service =) I appreciate it!!
@Ramon Ridge No problem :D
There is always ending questing: Who is the winner. And all the time same answer: There is no winner ... :D
If there was a clear winner, then the loser will not be in business...and there wouldn't be this comparison in the first place :-)
I was really having difficulty understanding/finding the differences between static and dynamic. This perfectly describes everything. Thank you!
Awesome to read that the video helped to make things clearer, thank you Roddy!
Extremely helpful and informative. Thanks!
So great to read that Taylor, thanks a lot for your comment!
Pulled up this video and unexpectedly heard good old Max's voice - highlight of my day
I at least got the gist of it but man, i am still lost. is there is Firefox extension which shows certain websites if they are static or dynamic? Or, can someone give me an example of any popular website which are static or dynamic
What is more preferable for a website to showcase a photography portfolio - static or dynamic?
Under which team do react and similar frameworks work? Static or dynamic? Is it possible to use react to make a static website more "dynamic" (fetch data from files and similar)?
As far as I understood React and other frameworks are STATIC sites, cause whole HTML page is generated via JS on the Browser.
@@kdfyufyuflhlfc so use node.js
A quick question, if I wanted a static page to somehow be changed by each user through a website software that changes the code (in a more simple way of course) to make the page look different for them, would it be possible to have slight personalization of each individual page (let's say each page is created individually for that user, there are multiple pages so it is not only one page)?
thanks sm for the info. by the way, it was very informative and helpful
Thanks this was a great video. The only thing I found a little odd was saying static website security is more complex. Everything else I have read says that dynamic websites are more vulnerable.
I have no experience on servers. Still, I think what they mean by static is websites without JS, JavaScript. That is, just an unchanging page without scripts. Just HTML and CSS. Which is not what what he meant in the video by static. I don't know which definition is correct. The definition he used in the video seems to be the more widely accepted one.
And yes, dynamic pages do seem more secure to me since scripts are run in the server, instead of in user side of things. Always good to keep your systems safe and trust them instead of external agents. Of course, this is only true if you have good code sanitization on your server.
Are Serverless applications also the same as Static Applications that consume endpoints from a REST API and do not need server-side code? (11:00 - 11:15)
4:10 The files, the files never change.
Personally, I prefere static pages. You can have free or very very cheap (I still prefer free) hosting, because all It has to do is to serve a couple static files. You can cache your static files in CDN (like free Cloudflare) and you site will be blazing fast, like 300ms to load with almost zero utilization on your hosting server. And to make it even better - you can use service worker to install all of your page in browser on first visit. Now your site can load in under 50ms, and even work offline. To summary: with static site your site can load in 300ms for first, and 50ms for any next visit, with almost zero utilization on server, which itself can be the cheapset and the most basic server you can find.
How can I implement this in my website? I have a calendar section,it’s a column of 5 events that I’d like to populate those fields, the date, name of the event, and a short description.
but can we say that a webpage is dynamically generated when all that's changed is the content with exact the same html structure?
Is this project dynamic if I make a website with React and JSON? I can't be sure about JSON.
Great video man, really helped me. Keep up the good work!
Excellent video! I like how you went beyond simple definitions by showing a demo and comparing the benefits of each approach. Your explanations were also very clear and concise.
Thank you very much Spencer!
Max, you're a great teacher. thanks alot dude.
Im new to this- very good info. How would i prepare the design for page layout in order to accomodate for a dynamic web app? Would the design be the same as my static site? What wouldthe back end developer need from t he design person?
Thank you-very insightful video: handy for project consideration and explaining these options to clients who pick up craze terms.
Thanks a lot for your comment Charl, just great to read that the video is helpful for you!
Thank
The Best internet Teacher by far!
So does Next.js' server-side rendering make a website dynamic even if it's a simple website, with the most logic used is for a contact form?
one of the best video I have ever seen
I don’t know how to thank youuu best explanation ever
Thanks for making the video! It's really helpful.
I don't understand you at the end of the video, If I'm building a static web page that only use html, css and javascript, how am I going to serve my web page with an API or something ? shouldn't I need something else to fetch this data ?
Really great video thank you! Is this a redefinition of SPA/MPA because static/dynamic can be used together in one site? Curious to hear your thoughts. Tracking this language game is truly difficult if working solo.
It's not a redefinition. Usually dynamic pages are used in multi page applications, but they tend to include some static assets (eg. javascript, css, images, ...). SPA/MPA is more about the look and feel of the website (does it reload the page if i click somewhere), while static/dynamic is about the way the page gets served to the user.
Ah, SPA/MPA is more of a UX term. Thanks for clearing that up.
Very good explanation, finally I could understand this topic, thanks my friend
Happy to read that Miguel, thank you for your comment!
this amazing lecture cleared some difficult concept for me
for a beginner which language would you recommend to start with for building dynamic websites?
I still don't get it. OK so I once made a blogging website which had blog_Structure HTML file but had not content as it would be fetched from an API depending on the blog selected to read. The rest of the HTML file were pretty much constant. Which type of website is this, considering the blog_structure?
At what point he said: In static websites, you can show a loading spinner before the data comes, which suggests that the data can fetched from a database just like your blogs. So, the fact that data is being fetched from a database on a website doesn't make the website dynamic.
Nice Video, all that i needed!
Happy to read that Elias, thank you!
So well explained. Thanks Max 👍
This clarified everything for me, thank you.
Alright, so then... I guess another big plus for static pages would be caching, right?
Cant cache something that constantly changes with each request.
Can cache something that never changes during request time, but does at run-time, adjusting its content by fetching data from left and right via js...
In that regard, what is the best-practice here?
Say I have a "weak" server that can only handle a few thousand requests / sec.
And lets say it gets super popular and has visits/requests > 1mil or more A SEC, even if that sounds ludicrous..
In that case, it would be better to use static webpages with a backend that provides REST API endpoints to provide the data during runtime, as you have also said.
The browser would fetch small chunks of data, lets say user/profile data, which is comparatively less (in bytes) than say the entire dynamic webpage that contains the user/profile data.
Let me throw out some numbers here... say the static page itself is 100kb big and the data requested by it via js -> REST API backend is just 1kb.
If it were a dynamic page, every request would require a data transfer of (100kb + 1kb) x 1 mil. visitors / sec.
But if its a static page, it never requests the 100kb page again because of the caching mechanism of the browser.
It only requests the user data, which is 1kb x 1 mil visitors / sec.
Did I get it right?
If all of what I said is conceptually right, why the heck would anyone ever use "dynamic" pages?
Is it because of comfort reasons, like there existing more solutions, frameworks, best-practices etc for dynamic pages?
I've been thinking about this and my stack would have been initially:
Java Spring Backend with the templating engine thymeleaf, that dynamically creates the pages.
But it seems that's a stupid idea considering what I just wrote in case I am aiming to write sth where I anticipate lots of users, popularity etc.
It would be better to use Java Spring Backend to merely provide the REST API endpoints and write all the code statically, via js, fetching all the data during runtime, etc. etc.
Edit: Lets say I could not anticipate that it would get so popular, lets say I only considered 100-200 visitors / sec and designed the entire system with that in mind. So I went with a dynamic page.
How hard would it be later on when it skyrockets in popularity, to make a switch in order to optimize all of that and reduce the bandwidth to give the server a break?
Could you please give your thoughts on all of what I wrote?
Thanks.
Great video btw.!
I think you're right on the mark. I've been looking into all the new options and feel like Gatsby+headless CMS like Strapi + GraphQL is the way to go. But I'm still diving into all the new info. You should watch this video from Google I/O th-cam.com/video/7_2CJs_VZk4/w-d-xo.html but Im not completely sold on AMP simply because everything gets rendered directly from google instead of your own server. So much so that your site's url doesn't even come up in the address bar.
Sir email is statics web page?
pls.. upload a tutorial video for #Partially_collapsing_static_sidebar using angular
Is this not just the difference between server side rendering and client side rendering? Static website just means unchanged, dynamic means different content can be shown. Dynamic website does not mean SSR. A website using CSR can still be dynamic.
so confusing tbh lol. if react is a client side rendered framework then why is it also dynamic (which is server side rendered)?
Hey a question, Is Static Site Generator considered as static website?
Thanks man, that was amazing explaination :)
So we can say dynamic is like a built-in-temple for our contents? Im sorry if i asked wrong question. Im a newbie in web development
No. Dynamic means the contents of one and the same web page changes every time you make a request (like click on a button. This is usually executed by a function in a chosen program).
Static means there is no change. But you can assign a hyperlink in a static web page that returns another static web page (or a file such as jpeg or pdf) when you click on it. That's the only change a static website can ever have.
Great explanation. Thanks for sharing this!
Yet another great video - thank you!
Awesome to read that you like it Mark, thank you for your support!
Academind I will definitely be buying one or more of your videos. Your pacing is absolutely perfect.
Thank you so much!
What about security?
Which one is more vulnerable to attackers?
Danke for another great video! Speaking of static websites, I was hoping if you can make a tutorial on any one of the static site generators like Jekyll, Gatsby (React JS) or Sculpin?
Definitely interesting tools! I do have plans to create more content on them in the future.
Ah, that won't happen, sorry. I'm not a fan of Ruby and I'm also not a fan of learning something just to quickly create a tutorial on. The things I teach are things I worked with quite a bit :)
Might still be other things than JS-only but Ruby is something I probably won't look into.
We understand you cannot learn and master everything out there and we don't like to burden you with demand after demand. Since you are an expertise in JS and PHP ignore Jekyll and you can create one on Gatsby in the near future. :) Danke!
Amazing and very informative video. Thanks!
Thanks so much Sam!
this is good quality video, nothing like these 5 minutes short videos with ukulele music on background, pretending to explain you stuff ..
What I have to do to scrape data from dynamically data changing websites.. really important from me..
Thanks Max, nice to know! You have awesome great videos to learn!
Thank you so much, this is amazing to read!
the static way is good when you have a small website with less content and not so much functions to run. javascript or jquery can do the job then. but if you have a bug website with more function i like the dynamic way then.
Thanks for the video .
What should I learn for server side language php or node js
There is no right or wrong choice here. Briefly look into both and go with the one you personally enjoy more
Academind thanks
php for personal/individual/self maintained projects. node for team projects
because php is faster to develop. and node is easier to maintain & better performance
Abdul Ghani thanks عبد الغني
I'd say that you should use WordPress to build a high quality site, but convert it to be static so that it is less resource intensive and is easier to host.
Does a firebase backend page count as a dynamic page ?
*Security is more complex with static, and easier with dynamic?* (@7:46 )
Wrong.
Sorry.
But so wrong - static basically only has 'man in the middle' attack exposure, and that's effectively closed off by https.
That's not my point. My point is that it's easy for beginners to expose information in their static (JS) code that can be abused. That is something that you have to get right. Obviously, you have to get server-side security right, too but it's easier in that you can't expose confidential information to users that easily.
Awesome that you replied. Big fan - happy, helpful, easy to follow tutes!
Okay. So I think I understand you.
You mean it is easier to 'protect confidential information' with a dynamic setup. I agree. I don't think you can even do this properly with a static setup - not really.
That applies IF there is confidential information to protect.
I think your viewers might wrongly think you mean static is more open to hacking, attacks, etc - when it is much more secure in this sense.
Just my 2 cents - keep up the good works.
Great video. ¿Can I generate a static website with Django?
Super helpful. Thank you
thank you so much. I couldn't figure it out
Great misconceptions get resolved
So we can say that static page is just web page and dynamic web page is a web application?
dynamic website = individual response (different files)
static website = always same files
a dynamic website needs an overhead to determine what individual code gets send to you ...
a static website needs no overhead since the files itself are always the same ....can still be dynamic by making client side resquest through the files itself . Basicly the files asking for more files ...
@@MedyGames So does that mean.. a static website that renders all on the client side is static? BUT then what if your game canvas is fixed, but the data on the players position is constantly sent via a server. I said POSITION is SENT, not rendered. So, in that case if the position is received by the client and then rendered on the canvas by the browser's local JS... is that still a static? would you require static hosting for that?
Excellent presentation 🐸
thank you ......ang hirap kasi ng module ko
E-Tech ba yan? Hehe
Galing mo na yat mag code ngyon Hahah
thank you it is very useful & valuable for this time
great tutorial!! Now I understand.
Could you maybe make a series about how to make a vscode extension?
I haven't created one - once I did that: Why not :)
Academind I think if you do you would be the first
Perfect explanation. 🙏🏻
Thanks so much. GREETINGS FROM GERMANY 💜
Max, I like your courses
Thanks a lot Dimitri, really great to read that!
is using headless cms mean dynamic?
very Beautiful Speaking style. Love from Pakistan
So SPA are considered static?
Great explanation
Thank you Kenny!
thank you so much, i learned a lot❤️
This is a great explanation.
Awesome to read that Debayon, thank you!
How come a static page is harder to secure?
That was awesome! Thanks!
Thanks max the video was very useful.
Great one :>) ...
Great to hear that, thanks so much!
amazing guide, thx a lot
Thank you Max.
Tank you for that good Video
I love it
Thank you very much :)
Static: sum(F) = 0
Dynamic: sum(F) = ma
Come from a no coding background and I am confused
that was great. thanks a lot
Very Nice, thank you!
Good explanation 👌👌👌
Thank you 🙂
Awesome explanation.
Thank you Reinaldo!
good explanation.
great. learned alot. thank u
So helpful, but I think Firebase now is supporting dynamic websites
This is out of the scope of this video, but why do you charge so little for your courses? I took your AWS course months ago and it has helped me a bunch, would easily of paid $50+ on it. I see some similarly sized instructors directing their YT traffic to a teachable course for ~$59 instead of just Udemy at $10 - $15, while still having Udemy courses for native Udemy members to find. Just my two cents as someone who actively consumes courses, your teaching style and knowledge is better than a vast majority of the courses out there, and should be worth more.
First I want to thank you for your amazing feedback Alexzander!
At the moment we are happy with Udemy as a platform, therefore we publish our courses there. We are aware of the pricing of course and it's honestly great to read comments like yours who are actually aware of the fact that $10-$15 for a course (including Q&A support) are actually not that much money for what you get - at least in my opinion.
Great Video
He switches from fluent American accent to another accent when he says some words or phrases it's kind of funny haha
Let's call it the "German" English :D
Love from India #king of IT
Thank you, sir.
We have this lecture in highschool
My Dad who's teacher in computer dont like to teach me 😭
Well said
it is actually fat client vs thin client debate.
After watching this, I'm even more confused. Everything looks static with dynamic elements for me now.