Static vs Dynamic Websites – What’s the Difference?

00:00:01 welcome to this video what's the
00:00:04 difference between static websites and
00:00:06 dynamic websites this is the question
00:00:08 I'll answer in this video because I get
00:00:10 it a lot and it's important to
00:00:12 understand what the differences are and
00:00:14 what they are actually not because it's
00:00:17 easy to get that wrong so let's have a
00:00:19 look and dive into that
00:00:23 and for that I prepared a super simple
00:00:26 project a static in a dynamic folder
00:00:28 let's have a look at the static page
00:00:30 first this is a static web page
00:00:32 static web page means it consists of
00:00:35 HTML CSS and JavaScript not necessarily
00:00:39 all these things you can just have HTML
00:00:41 if you want but definitely not more and
00:00:44 with JavaScript I don't mean no js' I
00:00:47 mean JavaScript that runs in the browser
00:00:49 this app here for example if I double
00:00:53 click my index.html file in the Mac
00:00:55 finder looks like that it has a button
00:00:58 if I click 'add I see this text because
00:01:00 in my code this is the mark-up I got
00:01:03 this button here and I got this text
00:01:06 which is initially not visible I got
00:01:09 some CSS code styling everything and the
00:01:11 JavaScript code turns that paragraph to
00:01:13 be visible by listening to a click on
00:01:16 the button and then just changing the
00:01:18 style of the paragraph to display block
00:01:21 previously it was display:none this is
00:01:25 static and it's all important to
00:01:27 understand obviously the page wasn't
00:01:29 that static something changed on the
00:01:31 page right so the page when it runs it's
00:01:34 kind of dynamic we still have
00:01:35 interactions there we can listen to user
00:01:37 events we can change something on the
00:01:39 page
00:01:40 static simply means that it's not
00:01:43 generated on the server the HTML code
00:01:46 we're getting the JavaScript code we're
00:01:48 getting empty CSS code we're getting is
00:01:50 not generated dynamically it's already
00:01:54 there it's hosted on a server and it's
00:01:56 lying there on the server in the version
00:01:59 we as a user receive it the JavaScript
00:02:02 code can then mess with the Dom and
00:02:04 change things but the input files were
00:02:07 getting the raw source code files are
00:02:09 already pre-built
00:02:11 and the source code doesn't change with
00:02:14 the next request we sent and that's
00:02:16 different for dynamic pages I also got a
00:02:19 dynamic page which is only dead
00:02:20 server.js fall and if I send my request
00:02:24 there by simply running that with the
00:02:27 note command I installed no chess on my
00:02:30 machine of course I'll start the server
00:02:32 running on localhost 3000 let's visit
00:02:35 that and I get back some
00:02:37 HTML but if I reload it you'll see that
00:02:39 this random value always changes now
00:02:42 this is not done with javascript in the
00:02:44 browser instead if I inspect my HTML
00:02:48 code here or not here but actually the
00:02:51 page source you see that the page source
00:02:55 is this HTML code and the value in there
00:02:58 is hard-coded into that source code so
00:03:00 it's not changed dynamically at runtime
00:03:04 this happens because in server j/s I
00:03:07 returned HTML code and I generate that
00:03:10 value on the server
00:03:11 this means dynamically generated the
00:03:14 HTML code I get back from the server is
00:03:17 not always the same every new request
00:03:19 can yield a different page typically you
00:03:22 don't really use that to randomly
00:03:24 generate numbers but maybe you sent back
00:03:26 a page where that card shopping cart
00:03:29 number in the top right corner was
00:03:31 updated on the server or you sent back a
00:03:34 new page when the user is locked in so
00:03:36 the HTML markup you get back adjusts
00:03:39 dynamically on the server and of course
00:03:42 you can build one at the same thing in a
00:03:45 dynamic way where you render it on the
00:03:46 server or in a static way where you have
00:03:49 a prebuilt HTML file which is then
00:03:51 changed by Java Script on the browser in
00:03:54 the client so both is possible so often
00:03:58 you can use both to achieve the same
00:04:00 result but the important thing here is
00:04:02 to understand what dynamic means things
00:04:04 change on the server a new request can
00:04:06 yield a different file where a static
00:04:09 always means the files never change they
00:04:12 sit on a server and you always get this

00:04:14 exact version but what's better then
00:04:16 especially when you can build the same
00:04:18 which one should you choose let's
00:04:20 compare them on a static page we talked
00:04:24 about HTML CSS in JavaScript and these
00:04:26 files are not dynamically rendered on a
00:04:29 server but and that's important still
00:04:31 served by a server of course every web
00:04:33 page has to sit on a server when you
00:04:35 reach it through a domain but they're
00:04:37 not dynamically generated you always get
00:04:40 the same set of pre-built files the page
00:04:43 content can change though through
00:04:45 javascript in the browser not on the
00:04:47 server so static does not mean that the
00:04:49 page never changes
00:04:50 it just means it's pre-built during
00:04:52 development and not change dynamically
00:04:55 on the server dynamic means that the
00:04:58 content is generated through some
00:05:00 server-side language like PHP or nodejs
00:05:03 in my example and that the return page
00:05:06 is dynamically generated so the server
00:05:09 returns a dynamically generated page and
00:05:12 that page is not necessarily always the
00:05:14 same because the HTML code and also
00:05:17 partly the JavaScript code even can be
00:05:19 generated on the server after being
00:05:22 returned you can of course still have
00:05:24 JavaScript which changes something in
00:05:26 the Dom so that still is possible but
00:05:29 the server side of course is not doing
00:05:31 anything on the loaded page once it's in
00:05:34 the browser that's technically not
00:05:36 really possible you can have JavaScript
00:05:38 listening to incoming events but that's
00:05:40 javascript in the browser not the server
00:05:42 side so dynamic rendering is really
00:05:44 about that first render when you send a
00:05:47 request and get back a page dynamic
00:05:50 therefore does not mean that there is no
00:05:51 HTML page being served it's just built
00:05:54 dynamically for each request so what's
00:05:57 better than well static means that
00:06:01 rendering happens in the browser the
00:06:03 JavaScript code can manipulate the page
00:06:05 you get back always the same
00:06:07 relatively empty page especially when
00:06:09 building a single page application where
00:06:11 everything is handled with JavaScript
00:06:13 but of course that higher reactivity
00:06:16 which you get by using JavaScript
00:06:18 typically all the updates are faster
00:06:21 users see it changes on the page faster
00:06:23 because they don't have that extra
00:06:25 round-trip of sending a request waiting
00:06:27 for the response seeing that refresh
00:06:30 icon of the browser spin and seeing a
00:06:32 white page instead you can show a more
00:06:34 beautiful spinner when you're waiting
00:06:35 for data everything happens in a more
00:06:38 reactive way but obviously that also has
00:06:41 some disadvantages since the page is not
00:06:43 finished when you get it
00:06:44 users might see something might see some
00:06:47 nice spinner but they still see a
00:06:49 spinner the content still has to be
00:06:51 fetched from the browser and if you're
00:06:53 doing a very performance intensive
00:06:55 update work you might even get
00:06:57 performance issues in the browser since
00:07:00 all the work happens there and not on
00:07:02 servers which might be more powerful
00:07:04 than your users machines additionally
00:07:07 for search engine optimization the
00:07:09 search engine doesn't necessarily see
00:07:11 the data which is loaded after half a
00:07:14 second it only sees the empty page which
00:07:16 well gets returned initially so death
00:07:18 can be something you need to consider
00:07:20 though of course not every app needs
00:07:22 search engine optimization if you're
00:07:24 building a business app which is hidden
00:07:26 behind a login anyways doesn't matter
00:07:28 dynamic pages render on the server
00:07:31 therefore the finished page gets
00:07:33 returned which is great for search
00:07:34 engine optimization which also means
00:07:37 users don't have to wait for the data
00:07:39 after they see your page they have to
00:07:42 wait for your page though so it's
00:07:44 basically a trade-off security can be
00:07:47 more complex in static pages because
00:07:49 javascript code in the browser can be
00:07:52 hacked can be read is not safe so you
00:07:56 have more creative solutions for
00:07:58 security they exist you can write secure
00:08:01 static apps there are tons of single
00:08:04 page applications out there which are
00:08:06 secure but it tends to be a bit more

00:08:09 complex in my opinion it's easier on the
00:08:11 server side also because we built apps
00:08:14 like this for ages and therefore we have
00:08:16 way more solutions and best practices
00:08:19 and packages that helped us there last
00:08:22 but not least a static host suffices for
00:08:24 static pages this means a host which is
00:08:26 only capable of returning HTML CSS and
00:08:29 JavaScript or any files but which
00:08:32 doesn't need to run any server-side code
00:08:34 and that is typically cheaper and less
00:08:36 complex for dynamic pages you obviously
00:08:39 need a host which is capable of running
00:08:41 your node code or your PHP code or
00:08:43 whatever you have and speaking of that
00:08:46 let's have a look at deployment for
00:08:49 static pages only a static host is
00:08:51 needed as I said so only a host which is
00:08:54 able to serve your files for dynamic
00:08:57 pages you need a host which runs your
00:08:59 server-side language and that means
00:09:01 static hosts often are cheaper and
00:09:04 easier to set up because there is not
00:09:05 much to configure dynamic hosts well you
00:09:09 need to find a host which supports your
00:09:11 server set language and the version of
00:09:13 the language you're using that's also
00:09:14 sometimes not the case and then you
00:09:17 might need to do
00:09:17 or set up you have to check you have to
00:09:21 do more things because more code runs on
00:09:23 the server so you have to ensure deaded
00:09:25 runs examples for static hosts are AWS
00:09:30 as free firebase hosting there are of
00:09:33 course way more for dynamic hosts we
00:09:35 have AWS ec2 or elastic beanstalk for a
00:09:39 more integrated approach or Heroku or of
00:09:42 course also a lot more so who's the
00:09:45 winner then there isn't a winner it
00:09:48 really depends on which kind of app
00:09:50 you're building what about search engine
00:09:52 optimization are you willing to put in
00:09:54 that extra word regarding security how
00:09:58 important is that complex server setup
00:10:01 thing for hosting dynamic pages it's
00:10:04 things like that you have to take into
00:10:06 account and it's always worth to dive
00:10:09 into both worlds build some demo apps
00:10:11 with both approaches and get a feeling
00:10:13 for the challenges you face with each
00:10:15 approach and which approach better suits
00:10:17 your needs these days static pages tend
00:10:21 to be super popular because with
00:10:23 JavaScript driving everything we can
00:10:26 offer a native app like experience to
00:10:29 users in the browser it's very important
00:10:32 these days that things update constantly
00:10:34 we give immediate feedback and that
00:10:37 tends to be easy with static apps
00:10:39 because JavaScript runs in the browser
00:10:41 you don't need to wait for a response to
00:10:43 change something it's harder with
00:10:45 dynamic apps that being said the
00:10:47 majority of the app is still driven by
00:10:49 these apps so saying that DS would not
00:10:53 matter anymore is certainly wrong and by
00:10:55 the way you'll always need server-side
00:10:57 code if you don't write a app which
00:10:59 returns dynamically generated HTML code
00:11:02 well then you will at least write some
00:11:04 REST API that offers end points for your
00:11:07 static app to fetch and store data I
00:11:09 hope this was helpful definitely join
00:11:12 the comments area and let me know what
00:11:14 you think about that what your thoughts
00:11:16 are and what you think about this video
00:11:18 of course hopefully see you in future
00:11:20 videos too bye

You may also like