Dynamic Websites vs Static Pages vs Single Page Apps (SPAs)

hi and welcome to this video in the modern web development world it's easy to overlook that we have more ways of building websites than with just single page applications and in this video I want to have a look at all these free major alternatives we have which they are and when you might want to use which alternative for building your website you'll find an article below the video where you also read about that and written form with some additional information and so on as always if you liked it would be great if you subscribe like share and all the usual stuff let's have a look so which three different types of websites do we have how can you build a modern website the first approach is deep oldest approach you have a static website you have an HTML file or maybe a bunch of HTML files you put these onto a server and then on that server they are well served to your users so if you user enters your cool page calm or your cool page calm slash about you get the different HTML files served back and for this I assume you know how the web generally works of course if you want to refresh her on that I do also have a video an article on that but that is the oldest approach of building a website now the second oldest approach would be that you build a dynamic website and with that I mean that the HTML code you're getting back in a response is rendered on the fly per request on the server now that is of course required or that is of course something that was required in the past because with that static website approach where you simply write HTML code and put that onto a server you couldn't build things like online shops or blogs so whenever you needed user generated content or you had dynamic content that changed a lot where you want it to display what's in the shopping cart of a user you can't write these HTML files in advance right you won't know what the user puts into his cart and so so there we needed a solution where the HTML files are generated on the server and are then returned to the users and that means that you have some server-side language like nodejs or PHP or Python often all the way the framework like Express or a level or Django for Python and the incoming request would be parsed and handled by the server side the server side code would then reach out to a database fetch some data from there and then stitch all these pieces together and build HTML code on the server of course not from scratch and on its own but instead you as a developer would typically define a template and define where the dynamic spots are in the template where that dynamic data should go into typically you would do that with a templating engine like blade for laravel or ejs or pug or handlebars for nodejs and Express and then the server would do all the heavy lifting and put all these pieces together to then return the finished HTML page to the user and that HTML response then already contains all the dynamic pieces so it really allows you to generate different pages for different requests now the third way of building websites is then of course to build a single page application this is the most modern way and it was basically inspired by mobile apps the earth we click around things happen instantly we never have to wait for a new page to load we might see a spinner occasionally while some data is fetched but in general we stay in that app experience and things happen instantly we click somewhere we instantly get a new page and we wanted to bring that experience to browsers as well because with the dynamic website approach where the server-side renders all the content of course every click that loads a new page results in a new request and then you response at the page being generated on a server and although modern engines and so on are really fast there is of course a slight delay and we might even need a new page if no dynamic content changed if we only went to our about or our contact page and therefore a single page applications emerged where are the ideas that you have one single page an HTML file that sits on a server and then only that one file is returned back to the user but in that one file the core thing that happens is that a bunch of JavaScript is loaded and started and that's JavaScript code then executes fetches data from a server and builds the entire HTML page the Dom to be precise what the user sees on the fly in the browser so not on a server anymore but in the browser the huge advantage of that is of course that since JavaScript runs in the browser and everything what we see is rendered in the browser things do happen instantly there is no additional request that needs to be sent to load a new page occasionally there are requests which need to be sent to fetch new data but in the meantime we can show a spinner or simply delay the navigation by half a second or anything like that so there are tricks to then improve the user experience since everything happens where the user is in the client so these are the free approaches and often it looks like single page applications are the only way to go nowadays because of that mobile app like experience for a lot of applications they are a decent choice but it turns out that the other two options are not old and outdated but have their place as well take static pages if you have a very simple page with no dynamic content like your personal home page where things don't change that often where you only update your resume once a year then of course you can build a bunch of HTML files with some CSS and maybe a little bit of JavaScript and deploy that onto a server and you're done that is all you need so why wouldn't you use that but even if you have content that changes more frequently like for example our website academy.com where we publish new articles and we shift things around and so on then you can use tools called static site generators where you have some data source that could be a database or a bunch of markdown files and you define how your pages should generally look like how the frame for each page looks like and so on and then this static site generator can be run by you so you start the generation process and the generator has a look at all your data sources fetches the data takes your predefined HTML frame so to say inserts the data and spits out a bunch of pre generated HTML files not generated on a server but on your machine or maybe in the cloud but not as part of an incoming request but before the page is deployed and then you deployed that finished static page onto a server the great thing there is that there are even solutions like gets bjs which allows you to build a react app and then when you build that as a static site gets me basically visits every page a user could visit and pre generates that HTML page by taking a snapshot but then what you deploy actually is both the state Paige but then all's a single-page application so no matter which page you load and that's for example the case on academy.com where we do use gatsby you load the finished page you load the finished HTML code but once it is loaded a single page application takes over and executes and thereafter you have that fast mobile app like experience again now that is the great advantage of static sites and for a lot of use cases there are a decent choice now dynamic pages where the content is generated on the server also can be great if you're building an online shop where both search engine optimization as well as dynamic content matters or is present then a dynamic page might be perfect because single page applications often have a problem with search engine optimization because search engine crawlers don't necessarily wait for the JavaScript code running in the browser to complete rendering especially when you first of all need to fetch some content from inside your JavaScript code and their first search engine optimization can be a problem with single page applications it's not with server-side applications where the content is dynamically generated there because they are you fetched a finished page already so the crawler the search engine crawler sees what the user sees and that of course is great in addition to that all the heavy lifting happens on the server and the advantage of that of course is that you don't impact the performance of the app when it runs in the users browser especially on slower devices that can be a real thing and therefore dynamic pages than dynamic sites where the content is generated on a per request basis on the server are not going anywhere they're present everywhere and they have their their use case it's not like single page applications are the only way to go such server-side applications make a lot of sense for use cases where you have data that changes frequently where your content is highly dynamic whereas search engine optimization matters and/or where you want to take performance away from your users or not take the performance away but take the performance impact away from your users and do that on a server of course you have the downsides of being a bit less reactive and so on but there always is a trade-off for each of these options so to sum it up we could say a dynamic web page has the advantage of shipping you the finished code it also does all the heavy lifting on the server and therefore your browser doesn't have to do that the downside of course is that every new page has to be loaded and you might need to wait for that and therefore the feeling is a bit less mobile app like and in addition to that from the nent back-end development is closer connected because everything happens on the server and of course you can kind of split the work but it is definitely close to connected then if you're building a single page application where you as the developer working on that are only focused on the front-end and people working on the API you might be talking to are working on the back-end now a single page application on the other end has the advantage of that high reactivity that great instant feeling where you have no page reload time times and where you have a really great user experience but search engine optimization can be a real problem a solvable one but still it can be a problem and in addition all the heavy lifting happens in the browser and especially on slower devices that can be a problem also on slower networks because all that javascript code has to be downloaded to the user first and that is something you absolutely have to keep in mind especially when you're targeting audiences with slower networks or devices static sites are great because they also give you the finished content and therefore they are again great for search engine optimization you also have no performance hit because the page doesn't need to be generated neither on the server nor in the browser it's just there already because you generated it as part of your development process already and that of course is great the downside is it's not really suited for fast change in content or for a user-generated content because well everything was pre generated and you don't want to pre generate your entire a page every second and setting up a complete workflow using such a static site generator can be challenging if you want to fully automate it definitely also something you can do and something you might not need but if you want to have a process where you publish a new article and then the whole page is automatically built and read Floyd it's all doable but it might require a little bit more work it's just something to be aware of now that is my summary these are the free options and I hope it became clear when you might want to use which and what the advantages of each option are hopefully see you in our videos to have a great time bye

Channel: Academind

Views: 102,529

Keywords: single page apps, spas, single page application, single page applications, dynamic website, ssr, node.js, nodejs, node express, templating engine, ejs, pug, handlebard, templating engine vs spa, static page, static page generator, static pages, html, css, javascript, tutorial

Id: Kg0Q_YaQ3Gk

Length: 12min 11sec (731 seconds)

Published: Tue Apr 16 2019