How to edit A Dynamic Website
Static vs Dynamic Websites - What's the Difference?
0:00 / 0:00
Quality:
Sharing buttons:
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
