Static vs Dynamic Websites - What's the Difference?

welcome to this video what's the difference between static websites and dynamic websites this is the question I'll answer in this video because I get it a lot and it's important to understand what the differences are and what they are actually not because it's easy to get that wrong so let's have a look and dive into that and for that I prepared a super simple project a static in a dynamic folder let's have a look at the static page first this is a static web page static web page means it consists of HTML CSS and JavaScript not necessarily all these things you can just have HTML if you want but definitely not more and with JavaScript I don't mean no js' I mean JavaScript that runs in the browser this app here for example if I double click my index.html file in the Mac finder looks like that it has a button if I click 'add I see this text because in my code this is the mark-up I got this button here and I got this text which is initially not visible I got some CSS code styling everything and the JavaScript code turns that paragraph to be visible by listening to a click on the button and then just changing the style of the paragraph to display block previously it was display:none this is static and it's all important to understand obviously the page wasn't that static something changed on the page right so the page when it runs it's kind of dynamic we still have interactions there we can listen to user events we can change something on the page static simply means that it's not generated on the server the HTML code we're getting the JavaScript code we're getting empty CSS code we're getting is not generated dynamically it's already there it's hosted on a server and it's lying there on the server in the version we as a user receive it the JavaScript code can then mess with the Dom and change things but the input files were getting the raw source code files are already pre-built and the source code doesn't change with the next request we sent and that's different for dynamic pages I also got a dynamic page which is only dead server.js fall and if I send my request there by simply running that with the note command I installed no chess on my machine of course I'll start the server running on localhost 3000 let's visit that and I get back some HTML but if I reload it you'll see that this random value always changes now this is not done with javascript in the browser instead if I inspect my HTML code here or not here but actually the page source you see that the page source is this HTML code and the value in there is hard-coded into that source code so it's not changed dynamically at runtime this happens because in server j/s I returned HTML code and I generate that value on the server this means dynamically generated the HTML code I get back from the server is not always the same every new request can yield a different page typically you don't really use that to randomly generate numbers but maybe you sent back a page where that card shopping cart number in the top right corner was updated on the server or you sent back a new page when the user is locked in so the HTML markup you get back adjusts dynamically on the server and of course you can build one at the same thing in a dynamic way where you render it on the server or in a static way where you have a prebuilt HTML file which is then changed by Java Script on the browser in the client so both is possible so often you can use both to achieve the same result but the important thing here is to understand what dynamic means things change on the server a new request can yield a different file where a static always means the files never change they sit on a server and you always get this exact version but what's better then especially when you can build the same which one should you choose let's compare them on a static page we talked about HTML CSS in JavaScript and these files are not dynamically rendered on a server but and that's important still served by a server of course every web page has to sit on a server when you reach it through a domain but they're not dynamically generated you always get the same set of pre-built files the page content can change though through javascript in the browser not on the server so static does not mean that the page never changes it just means it's pre-built during development and not change dynamically on the server dynamic means that the content is generated through some server-side language like PHP or nodejs in my example and that the return page is dynamically generated so the server returns a dynamically generated page and that page is not necessarily always the same because the HTML code and also partly the JavaScript code even can be generated on the server after being returned you can of course still have JavaScript which changes something in the Dom so that still is possible but the server side of course is not doing anything on the loaded page once it's in the browser that's technically not really possible you can have JavaScript listening to incoming events but that's javascript in the browser not the server side so dynamic rendering is really about that first render when you send a request and get back a page dynamic therefore does not mean that there is no HTML page being served it's just built dynamically for each request so what's better than well static means that rendering happens in the browser the JavaScript code can manipulate the page you get back always the same relatively empty page especially when building a single page application where everything is handled with JavaScript but of course that higher reactivity which you get by using JavaScript typically all the updates are faster users see it changes on the page faster because they don't have that extra round-trip of sending a request waiting for the response seeing that refresh icon of the browser spin and seeing a white page instead you can show a more beautiful spinner when you're waiting for data everything happens in a more reactive way but obviously that also has some disadvantages since the page is not finished when you get it users might see something might see some nice spinner but they still see a spinner the content still has to be fetched from the browser and if you're doing a very performance intensive update work you might even get performance issues in the browser since all the work happens there and not on servers which might be more powerful than your users machines additionally for search engine optimization the search engine doesn't necessarily see the data which is loaded after half a second it only sees the empty page which well gets returned initially so death can be something you need to consider though of course not every app needs search engine optimization if you're building a business app which is hidden behind a login anyways doesn't matter dynamic pages render on the server therefore the finished page gets returned which is great for search engine optimization which also means users don't have to wait for the data after they see your page they have to wait for your page though so it's basically a trade-off security can be more complex in static pages because javascript code in the browser can be hacked can be read is not safe so you have more creative solutions for security they exist you can write secure static apps there are tons of single page applications out there which are secure but it tends to be a bit more complex in my opinion it's easier on the server side also because we built apps like this for ages and therefore we have way more solutions and best practices and packages that helped us there last but not least a static host suffices for static pages this means a host which is only capable of returning HTML CSS and JavaScript or any files but which doesn't need to run any server-side code and that is typically cheaper and less complex for dynamic pages you obviously need a host which is capable of running your node code or your PHP code or whatever you have and speaking of that let's have a look at deployment for static pages only a static host is needed as I said so only a host which is able to serve your files for dynamic pages you need a host which runs your server-side language and that means static hosts often are cheaper and easier to set up because there is not much to configure dynamic hosts well you need to find a host which supports your server set language and the version of the language you're using that's also sometimes not the case and then you might need to do or set up you have to check you have to do more things because more code runs on the server so you have to ensure deaded runs examples for static hosts are AWS as free firebase hosting there are of course way more for dynamic hosts we have AWS ec2 or elastic beanstalk for a more integrated approach or Heroku or of course also a lot more so who's the winner then there isn't a winner it really depends on which kind of app you're building what about search engine optimization are you willing to put in that extra word regarding security how important is that complex server setup thing for hosting dynamic pages it's things like that you have to take into account and it's always worth to dive into both worlds build some demo apps with both approaches and get a feeling for the challenges you face with each approach and which approach better suits your needs these days static pages tend to be super popular because with JavaScript driving everything we can offer a native app like experience to users in the browser it's very important these days that things update constantly we give immediate feedback and that tends to be easy with static apps because JavaScript runs in the browser you don't need to wait for a response to change something it's harder with dynamic apps that being said the majority of the app is still driven by these apps so saying that DS would not matter anymore is certainly wrong and by the way you'll always need server-side code if you don't write a app which returns dynamically generated HTML code well then you will at least write some REST API that offers end points for your static app to fetch and store data I hope this was helpful definitely join the comments area and let me know what you think about that what your thoughts are and what you think about this video of course hopefully see you in future videos too bye

Channel: Academind

Views: 174,466

Keywords: static vs dynamic, static vs dynamic website, static vs dynamic webpage, vue, react, angular, static websites, static website, dynamic website, node, node.js

Id: _wFJj94kSTU

Length: 11min 24sec (684 seconds)

Published: Thu Jul 05 2018