Static vs Dynamic Websites - What's the Difference?
Vložit
- čas přidán 4. 07. 2018
- What are static webpages? What are dynamic ones? What's the difference and which approach should you follow? This video should clear some doubts and help you understand these concepts.
----------
Build static pages with Nuxt.js: acad.link/nuxtjs
Build a static website with Vue: acad.link/vuejs
Build a static website with React: acad.link/reactjs
Build a static website with Angular: acad.link/angular
Want to learn something totally different? Check out all other courses: academind.com/learn/our-courses
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice! - Věda a technologie
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
Great video man, really helped me. Keep up the good work!
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!
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
Pulled up this video and unexpectedly heard good old Max's voice - highlight of my day
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
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?
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!
What is more preferable for a website to showcase a photography portfolio - static or dynamic?
This clarified everything for me, thank you.
So well explained. Thanks Max 👍
Thanks Max, nice to know! You have awesome great videos to learn!
Thank you so much, this is amazing to read!
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.
for a beginner which language would you recommend to start with for building dynamic websites?
Thanks man, that was amazing explaination :)
Max, you're a great teacher. thanks alot dude.
Great explanation. Thanks for sharing this!
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)
Extremely helpful and informative. Thanks!
So great to read that Taylor, thanks a lot for your comment!
The Best internet Teacher by far!
Super helpful. Thank you
pls.. upload a tutorial video for #Partially_collapsing_static_sidebar using angular
Nice Video, all that i needed!
Happy to read that Elias, thank you!
I don’t know how to thank youuu best explanation ever
That was awesome! Thanks!
Very good explanation, finally I could understand this topic, thanks my friend
Happy to read that Miguel, thank you for your comment!
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
Is this project dynamic if I make a website with React and JSON? I can't be sure about JSON.
thank you so much, i learned a lot❤️
this amazing lecture cleared some difficult concept for me
great tutorial!! Now I understand.
Perfect explanation. 🙏🏻
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
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.
thank you so much. I couldn't figure it out
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.
Great explanation
thank you it is very useful & valuable for this time
Great video. ¿Can I generate a static website with Django?
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.
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 :-)
Does a firebase backend page count as a dynamic page ?
Very Nice, thank you!
Hey a question, Is Static Site Generator considered as static website?
that was great. thanks a lot
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
Amazing and very informative video. Thanks!
Thanks so much Sam!
amazing guide, thx a lot
Great misconceptions get resolved
Thank you Max.
Tank you for that good Video
I love it
Thank you very much :)
Excellent presentation 🐸
What I have to do to scrape data from dynamically data changing websites.. really important from me..
Thanks so much. GREETINGS FROM GERMANY 💜
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!
great. learned alot. thank u
Sir email is statics web page?
but can we say that a webpage is dynamically generated when all that's changed is the content with exact the same html structure?
Thanks max the video was very useful.
Great one :>) ...
Great to hear that, thanks so much!
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 ?
What about security?
Which one is more vulnerable to attackers?
is using headless cms mean dynamic?
good explanation.
Thank you, sir.
This is a great explanation.
Awesome to read that Debayon, thank you!
so confusing tbh lol. if react is a client side rendered framework then why is it also dynamic (which is server side rendered)?
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!
4:10 The files, the files never change.
Max, I like your courses
Thanks a lot Dimitri, really great to read that!
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.
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.
Awesome explanation.
Thank you Reinaldo!
very Beautiful Speaking style. Love from Pakistan
Multi Vender E-commerce Website this static or dynamic?
Thank you
Well said
thank you
this is good quality video, nothing like these 5 minutes short videos with ukulele music on background, pretending to explain you stuff ..
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 عبد الغني
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.
Love from India #king of IT
How come a static page is harder to secure?
Great Video
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 czcams.com/video/7_2CJs_VZk4/video.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.
thanks
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
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.
thank you ......ang hirap kasi ng module ko
E-Tech ba yan? Hehe
Galing mo na yat mag code ngyon Hahah
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 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?
Amazing
Good explanation 👌👌👌
Thank you 🙂
Both!
cool video)
Come from a no coding background and I am confused
So helpful, but I think Firebase now is supporting dynamic websites
Static: sum(F) = 0
Dynamic: sum(F) = ma
such a GREAT video! you guys are GREAT! i think i will need dynamic. i have a video creator site like YT called roxytube dot com. i have a dedicated server and am thinking of switching to Amazon....just afraid of the monthly bill as more video creators come onboard. thanks! subbed!
it is actually fat client vs thin client debate.
Is it possible to collect users input like this?