- 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