Coding

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